07 Oct Bootstrap Cards

Learn what is a card in Bootstrap and how to create one. With that, learn the following in this lesson:

• Card Header and Footer
• How to add color to a card
• Set Card Title
• Card Link
• Add an Image to a card background
• Set the image at the top inside the card
• Set the image at the bottom inside the card
• Grid of Cards
• Deck of cards
• Group of cards

The card is a box in Bootstrap. The box has borders. It adds padding around the content to make it look amazing. Cards came to replace panels, wells, and thumbnails.

To create a Card, use the following Bootstrap classes:

• .card: create a class
• .card-body: add content to the card

To set Card Header and Footer:

• .card-header
• .card-footer

Add color to the card using the following contextual classes:

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

Set the Card Title:

• .card-title

Set the Card Link:

• .card-link

Add the Image to a card background:

• .card-img-overlay

Set the image at the top inside the card:

• .card-img-top

Set the image at the bottom inside the card

• .card-img-bottom

Create a Grid of Cards:

• .card-columns

Set a Deck of cards:

• .card-deck

Set Group of cards:

• .card-group class

Example – Bootstrap Cards

Let us now see an example to create Cards in Bootstrap:

Output

Video Tutorial – Bootstrap Cards

The following is the complete video tutorial to learn how to work with Cards in Bootstrap:

If you liked the tutorial, spread the word and share the link and our website Studyopedia with others.

Read More:

• Bootstrap Alerts
• Bootstrap Badges
• Bootstrap Progress Bars
• Bootstrap Navbar
• Bootstrap Navigation Tabs & Pills
• Bootstrap Pagination
• Bootstrap Images
• Bootstrap Tooltips
• Bootstrap Collapse
• Bootstrap Dropdown
• Bootstrap Forms