07 Oct Bootstrap Cards

Posted at 20:03h in Bootstrap by

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:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Cards Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
        <div class="container">
         <h2>Demo</h2>
         <p>Details</p>
         <div class ="card">
            <div class="card-body">
               The match will start at 9PM.
            </div>
         </div>
      </div>
   </body>
</html>

Output

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
Print page
2 Likes
Studyopedia Editorial Staff
contact@studyopedia.com

We work to create programming tutorials for all.

No Comments

Post A Comment