Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Card with only one paragraph element in the card-body has unnecessary margin at the bottom

See original GitHub issue

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;
}

JSFiddle

https://jsfiddle.net/qhv016wa/

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:9 (4 by maintainers)

Top GitHub Comments

3reactions

rohit2sharma95commented, Jul 22, 2020

There is already a class card-text for it. Or you can use utility class mb-0.

https://github.com/twbs/bootstrap/blob/c7bc7a31bbc11c3f9af3ad317581cbd13c7bb5f1/scss/_card.scss#L62-L64

1reaction

florianlacreusecommented, Jul 22, 2020

And what if the last item is an .alert for instance? Since .alert has a bottom margin it will be the same issue. Same for many more components. IMHO, you should use margin utilities, as @rohit2sharma95 said.