I have been working on customizing a template from startbootstr app. The original code looks like this:
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">...</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">...</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">...</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
</div>
In order to remove the "Find out more" buttons, I deleted the divs with the class "card-footer." However, this caused a large blank space below the "card-text". Despite checking the browser's style inspector, I couldn't identify which CSS class controls the height of the cards. While "h-100" is applied to the Div, adjusting it doesn't change the overall height. Where is the height of the cards in the code sample controlled? Thank you in advance for any help provided.