Bootstrap 5 Framework

Cards

14 min Lesson 26 of 40

Cards in Bootstrap 5

Cards are flexible and extensible content containers in Bootstrap 5. They include options for headers, footers, images, and a wide variety of content. Cards replace Bootstrap 3's panels, wells, and thumbnails.

Basic Card Structure

A card is built with a basic structure that includes header, body, and footer sections:

<div class="card">
    <div class="card-header">
        Card Header
    </div>
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card content goes here. Cards support a wide variety of content, including text, images, lists, links, and more.</p>
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
    <div class="card-footer text-muted">
        Card Footer
    </div>
</div>
    

Card Components:

.card-header - Optional header section
.card-body - Main content area (required)
.card-footer - Optional footer section
.card-title - Card heading
.card-text - Card paragraph text

Cards with Images

Cards can include images at the top, bottom, or as overlays:

<!-- Image Top -->
<div class="card" style="width: 18rem;">
    <img src="image.jpg" class="card-img-top" alt="Card image">
    <div class="card-body">
        <h5 class="card-title">Card with Image</h5>
        <p class="card-text">This card has an image at the top.</p>
        <a href="#" class="btn btn-primary">View Details</a>
    </div>
</div>

<!-- Image Bottom -->
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Card with Image Bottom</h5>
        <p class="card-text">This card has an image at the bottom.</p>
    </div>
    <img src="image.jpg" class="card-img-bottom" alt="Card image">
</div>
    

Card Image Overlays

Turn an image into a card background and overlay text:

<div class="card text-white">
    <img src="background.jpg" class="card-img" alt="Background">
    <div class="card-img-overlay">
        <h5 class="card-title">Card with Overlay</h5>
        <p class="card-text">Text overlaid on the image background.</p>
        <p class="card-text"><small>Last updated 3 mins ago</small></p>
    </div>
</div>
    

Tip: Use .card-img-overlay to position content over the card image. Combine with text utility classes for better readability.

Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns:

<div class="card-group">
    <div class="card">
        <img src="image1.jpg" class="card-img-top" alt="Image 1">
        <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">This is a wider card with supporting text.</p>
        </div>
    </div>
    <div class="card">
        <img src="image2.jpg" class="card-img-top" alt="Image 2">
        <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">This card has supporting text below.</p>
        </div>
    </div>
    <div class="card">
        <img src="image3.jpg" class="card-img-top" alt="Image 3">
        <div class="card-body">
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">This is a wider card with more text.</p>
        </div>
    </div>
</div>
    

Card Layouts with Grid

Use Bootstrap's grid system for more control over card layouts:

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">
            <img src="image1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Content for card 1.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <img src="image2.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Content for card 2.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <img src="image3.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Content for card 3.</p>
            </div>
        </div>
    </div>
</div>
    

Grid Layout Benefits:

.row-cols-* - Control columns per row
.h-100 - Equal height cards
.g-* - Control gutter spacing
Responsive column control with breakpoints

Card Customization

Cards can be customized with various background and border utilities:

<!-- Colored Cards -->
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Primary Card</div>
    <div class="card-body">
        <h5 class="card-title">Primary Background</h5>
        <p class="card-text">Card with primary background color.</p>
    </div>
</div>

<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
    <div class="card-header">Success Card</div>
    <div class="card-body">
        <h5 class="card-title">Success Background</h5>
        <p class="card-text">Card with success background color.</p>
    </div>
</div>

<!-- Border Cards -->
<div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Primary Border</div>
    <div class="card-body text-primary">
        <h5 class="card-title">Primary Border Card</h5>
        <p class="card-text">Card with only border color.</p>
    </div>
</div>
    

Horizontal Cards

Create horizontal card layouts using grid classes:

<div class="card mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <img src="image.jpg" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Horizontal Card</h5>
                <p class="card-text">This is a horizontal card layout.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>
    

Practice Exercise

Create a product showcase page with:

A grid of 4 product cards (2 per row on tablets)
Each card should have an image, title, description, and price
Use the .h-100 class for equal height cards
Add a "Buy Now" button in each card
Create one featured product card with image overlay

Best Practices:

Use .h-100 with grid layouts for equal height cards
Keep card content concise and focused
Use consistent card widths within groups
Consider card shadows for depth: .shadow-sm
Test responsive behavior on different screen sizes