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.
1 2 3 | <div class="card"> <div class="card-body">Basic card</div> </div> |
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:
1 2 3 4 5 | <div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div> |
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:
1 2 3 4 5 6 7 8 | <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Your Card Text</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> |
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.
1 2 3 4 5 6 7 8 | <div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <div class="card-columns"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">bg-primary card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text"> bg-warning card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text"> bg-success card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text"> bg-success card</p> </div> </div> <div class="card bg-light"> <div class="card-body text-center"> <p class="card-text">bg light card</p> </div> </div> <div class="card bg-info"> <div class="card-body text-center"> <p class="card-text">bg info card</p> </div> </div> </div> |
Card Deck
A grid of equal height and width cards can be created using the .card-deck class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="card-deck"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">bg-primary card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">bg-warning card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">bg-success card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">bg-danger card</p> </div> </div> </div> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="card-group"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">bg-primary card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">bg-warning card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">bg-success card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">bg-danger card</p> </div> </div> </div> |