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.

 

    Basic card

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:

 

    Header
    Content
    Footer

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 title
        Your Card Text
        Card link
        Another link

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.

 

    
    
        John Doe
        Some example text.
        See Profile

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.

 

    
        
            bg-primary card
        
    
    
        
             bg-warning card
        
    
    
        
             bg-success card
        
    
    
        
             bg-success card
        
    
    
        
            bg light card
        
    
    
        
            bg info card

Card Deck

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

 

    
        
            bg-primary card
        
    
    
        
            bg-warning card
        
    
    
        
            bg-success card
        
    
    
        
            bg-danger card

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

 

    
        
            bg-primary card
        
    
    
        
            bg-warning card
        
    
    
        
            bg-success card
        
    
    
        
            bg-danger card