Card with only one paragraph element in the card-body has unnecessary margin at the bottom
Created by: Doogiemuc
When a bootstrap card only contains one paragraph element <p>
in its card-body, then the paragraph still has its default margin-bottom: 1rem; This should be removed for the last(!) paragraph in a card.
Simple example HTML
<div class="card">
<div class="card-body">
<p>This paragraph has a default margin-bottom. It shouldn't</p>
</div>
</div>
Solution
Add the following CSS
.card-body p:last-child {
margin-bottom: 0;
}