.card
class, and content inside the card has a .card-body
class:.card-header
class adds a heading to the card and the .card-footer
class adds a footer to the card:.bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
and .bg-light
..card-title
to add card titles to any heading element. The .card-text
class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside .card-body
. The .card-link
class adds a blue color to any link, and a hover effect..card-img-top
or .card-img-bottom
to an <img>
to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body
to span the entire width:.stretched-link
class to a link inside the card, and it will make the whole card clickable and hoverable (the card will act as a link):.card-img-overlay
to add text on top of the image:.card-columns
class creates a masonry-like grid of cards (like pinterest). The layout will automatically adjust as you insert more cards..card-deck
class creates a grid of cards that are of equal height and width. The layout will automatically adjust as you insert more cards..card-group
class is similar to .card-deck
. The only difference is that the .card-group
class removes left and right margins between each card.