Bootstrap Cards

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

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

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

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:

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.

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