Skip to main content

Cards in Bootstrap 5

Bootstrap Cards​

Bootstrap Cards are a flexible and extensible content container.

They come in various styles, sizes, and colors and can contain a wide range of content, including text, images, links, and buttons. Cards can be used to display information in a clean and organized way, and they are often used for displaying content on websites and web applications.

As an example:

Editor

Loading...

In this example:

  • The card consists of an image at the top, a title, some text, and a button.
  • The card class is the main class for the card container, while card-img-top, card-title, card-text, and btn are classes for the image, title, text, and button elements respectively.
  • The btn-primary class is used to give the button a blue color.

Bootstrap cards are a useful tool for displaying content in a visually appealing way. They can be customized with various features, including headers and footers.

Here's how you can add a header and footer to a Bootstrap card:

  • Start with the basic card structure, using the <div class="card"> tag.

  • To add a header, create a new <div> element inside the card with the class "card-header". You can include any content you want inside this header element, such as a title or image.

As an example:

<div class="card">
     <div class="card-header">
          <h3>Card Header</h3>
     </div>
     <div class="card-body">
          <p>This is the body of the card.</p>
     </div>
</div>
  • To add a footer, create a new <div> element inside the card with the class "card-footer". You can include any content you want inside this footer element, such as additional information or links.

As an example:

<div class="card">
     <div class="card-header">
          <h3>Card Header</h3>
     </div>
     <div class="card-body">
          <p>This is the body of the card.</p>
     </div>
     <div class="card-footer">
          <a href="#">Learn More</a>
     </div>
</div>

Contextual Cards​

Contextual cards in Bootstrap are a way to visually highlight specific types of content or actions within a card.

Contextual classes can be applied to various elements within a card to change their appearance based on their context. Here are some examples:

  • Background color classes: You can use the bg-* classes to change the background color of the card based on its context. Where star represents the color

As an example:

<div class="card bg-primary">
     <div class="card-body">
          <p>This card represents primary content or action.</p>
     </div>
</div>
  • Text color classes: You can use the text-* classes to change the text color of the card based on its context. Where star represents the color

As an example:

<div class="card bg-dark text-white">
     <div class="card-body">
          <p>This card has a dark background and white text.</p>
     </div>
</div>
  • Border color classes: You can use the border-* classes to change the border color of the card based on its context.

As an example:

<div class="card border-success">
     <div class="card-body">
          <p>This card represents a successful action or completion.</p>
     </div>
</div>
  • Shadow classes: You can use the shadow-* classes to add a shadow effect to the card based on its context.

As an example:

<div class="card shadow-lg">
     <div class="card-body">
          <p>
               This card represents a larger or more important piece of content.
          </p>
     </div>
</div>

Card Image Overlays​

To create a card with an image overlay in Bootstrap, you can use the card component and add the overlay using the overlay class.

As an example:

Editor

Loading...

In this example:

  • We have used the card component with an image and added the overlay using the card-img-overlay class.
  • The card-img class is used to specify the image for the card. Inside the overlay, we have added the title and text using the card-title and card-text classes, respectively.
  • We have also used text-white class for text