I am working with Bootstrap at the moment. I loop round & create lots of these cards (one for each task in the project. The problem is, if the card has a bigger title, then each card is not the same height. I want to be able to standardize the height,
Originally I used:
<div class="card">
Then I tried, the below, which does indeed make all the cards a standard height.
<div class="card h-100">
As you can see on the second one, it removes the space between each row of cards, so I'm not sure how to standardise the size, while still retaining the spacing?
Any ideas will be greatly appreciated:
<div class="row">
<div class="col-sm-3">
<div class="card">
<h5 class="card-header">65 :new task from closed screen</h5>
<div class="card-body">
<p class="card-text">
<table class="table table-hover">
<tr>
<td>Created By</td>
<td>kikee</td>
</tr>
<tr>
<td>Project</td>
<td>netshock</td>
</tr>
<tr>
<td>Priority</td>
<td class="table-danger">High</td>
</tr>
</table>
<table class="table table-hover">
<tbody>
<tr class="table">
<th scope="col"><form action="/complete/" name="form2", id="form2" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
<button name="donebutton" type="submit" value=65 data-toggle="tooltip" data-placement="top" title="Complete Task" class="btn btn-success"><i class="fas fa-check"></i></button></th>
</form>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#EditModal65">
<i class="far fa-edit"></i> </button>
<!-- Modal -->
<div class="modal fade" id="EditModal65" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Task 65 : new task from closed screen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/update/" name="form1", id="form1" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
<div class="form-group">
<input type="text" name="project" class="form-control" id="task" aria-describedby="emailHelp" placeholder="Project">
</div>
<div class="form-group">
<select name="priority" class="form-control" id="exampleFormControlSelect1">
<option>Select Priority</option>
<option>High</option>
<option>Medium</option>
<option>Minimum</option>
</select>
</div>
<div class="form-group">
<input type="text" name="due" class="form-control" id="task" aria-describedby="emailHelp" placeholder="Due Date YYYYMMDD">
</div>
<button type="submit" name="editbutton" value=65 class="btn btn-warning">Edit Task</button>
</form>
</td>
<td scope="col"><form action="/delete/" name="form1", id="form1" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
<button name="deletebutton" data-toggle="tooltip" data-placement="top" title="Delete Task" type="submit" value=65 class="btn btn-danger"><i class="fas fa-times"></i></button></td></form>
</tr>
</tbody>
</table>
<table class="table table-hover">
<tbody>
<tr class="table">
<th scope="col">
<!-- Button trigger modal -->
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#Modal65">
<i class="fas fa-comment-dots"></i>
</button>
<!-- Modal -->
<div class="modal fade" id="Modal65" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Note 65 : new task from closed screen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/addnote/" name="form1", id="form1" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
<div class="form-group">
<textarea name="note" class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
</div>
<!-- <div class="form-group">
<input type="text" name="noteid" class="form-control" id="noteid" aria-describedby="emailHelp" placeholder="Enter Note ID">
</div>-->
<div align="right">
<button name="addnote" type="submit" value=65 class="btn btn-secondary">add note</button>
</form>
</div>
</div>
</div>
</div>
</th>
<td>
<form action="/viewnote/" name="form1", id="form1" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='8ALiONJGxPQaAnTYwsBUUnpny1YnyntTOccxk7VG7rTsltn2hT63KTTlv7rS09m3' />
<button name="viewnote" type="submit" value=65 data-toggle="tooltip" data-placement="top" title="View Task Notes" class="btn btn-info"><i class="fas fa-comments"></i></button></form></td>
<td scope="col">
<button name="nothing" data-toggle="tooltip" data-placement="top" type="submit" class="btn btn-secondary"><i class="fal fa-circle"></i></button></td>
<tr>
</div></div></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
