Bootstrap Cards

Bootstrap 4 cards which, basically, are bordered boxes with some content and some padding around it.

We can style them for headers, footers, content, colors, etc.

Bootstrap 4 Basic Card

The basic cards in Bootstrap 4 are created using the .card class. The content inside these cards use the .card-body class.

Header and Footer of Bootstrap Cards

We have the two classes – .card-header and .card-footer for adding the header and footer section to the card.

Sample code:

Contextual Cards

Here’s a list of the contextual classes used for the background colors in cards

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light.

Titles, text, and links

Contextual classes for title, text and links:

  • .card-title
  • .card-text
  • .card-link

Sample code:

Bootstrap Card Images

We can use the classes .card-img-top or .card-img-bottom with the <img> element for placing an image at the top or at the bottom inside the card respectively.

Card Image Overlays

The .card-img-overlay helps to make an image as background in the card.

Card Columns

This layout can be seen on websites like pintrest. We use .card-columns class that will create a masonry-like grid of cards that will automatically adjust as more cards keep coming in.

Card Deck

A grid of equal height and width cards can be created using the .card-deck class.

Bootstrap Card Group

The layout is almost similar to a Card Deck except that, here, the left and right margins between the cards are removed. The class used for this layout is the .card-group class