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:


Bootstrap Cards Example

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 Tooltips
Bootstrap Collapse
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading