Bootstrap Cards

A card in Bootstrap 5 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.c

Bootstrap cards are versatile components in the Bootstrap framework used to display content in a flexible and extensible container. They can contain a mix of images, text, links, and other elements, making them ideal for building user-friendly layouts that look professional on any screen size.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Basic Card

A basic card is created with the .card class, and content inside the card has a .card-body class:

Example:
<div class="card">
<div class="card-body">Basic card</div>
</div>

Header and Footer

The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card: Example:
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>

Contextual Cards

To add a background color to the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Titles, text and links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside .card-body. The .card-link class adds a blue color to any link, and a hover effect.

<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

Card Images

Add .card-img-top or .card-img-bottom to an to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width:

Example:
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<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 Image Overlays

Turn an image into a card background and use .card-img-overlay to add text on top of the image:

Example:
<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>

Key points of Bootstrap Card

1. Container

The .card class creates a card container to hold content in a flexible, customizable format.

2. Image support

Images can be added with classes like .card-img-top (for images on top) and .card-img-bottom.

3. Content Layout:

• Card Header & Footer: .card-header and .card-footer add header and footer sections.
• Card Body: The .card-body class holds the main content, such as text, titles, buttons, etc.
• Card Title & Subtitle: Use .card-title and .card-subtitle to create a hierarchical title structure.

4. Text Content:

• Text Styling: .card-text styles regular card text.
• Alignment: Use .text-center, .text-right, or .text-left for text alignment.

5. Interactive Elements:

Cards can contain buttons (.btn) and links ( tags) within the body for navigation or actions.

6. List Group Support:

Include lists with .list-group and .list-group-item inside a card for displaying items.

7. Layouts:

• Horizontal Cards:Use .row and .col classes to create card grids.
• Card columns:.card-columns arranges cards in masonry-style columns.

8. Styling Options:

• Border & Background Colors: Use .border-* and .bg-* classes for themed colors.
• Card Shadows: Add shadow-sm, shadow, or shadow-lg for shadow effects.