Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Basic Card

Cards are built with as little markup and styles as possible.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="card-link">Card link</a>
    </div>
</div>

Card Body

The building block of a card is the .card-body.

This is some text within a card body.

<div class="card">
    <div class="card-body">
        This is some text within a card body.
    </div>
</div>

Titles, Text, and Links

Card titles, subtitles, and text can be created with standard HTML elements.

Card title

Card subtitle

Some quick example text to build on the card title.

Go somewhere

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Images

Cards support a wide variety of content, including images.

Image Caps

Card with top image

This is a card with supporting text below as a natural lead-in.

Go somewhere

Card with bottom image

This is a card with supporting text above as a natural lead-in.

Go somewhere

<div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some text.</p>
    </div>
</div>

Image Overlays

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

<div class="card text-white">
    <img src="..." class="card-img" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Text content over image.</p>
    </div>
</div>

Header and Footer

Add an optional header and/or footer within a card.

Featured

Special title treatment

With supporting text below.

Go somewhere

Special title treatment

With supporting text below.

Go somewhere

2 days ago

<div class="card">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text</p>
    </div>
    <div class="card-footer text-muted">Footer</div>
</div>

Card Colors

Use background and border utilities to change the appearance of a card.

Header

Primary card

Some text to build on the card title.

Header

Secondary card

Some text to build on the card title.

Header

Success card

Some text to build on the card title.

Header

Danger card

Some text to build on the card title.

Header

Warning card

Some text to build on the card title.

Header

Info card

Some text to build on the card title.

<div class="card text-white bg-primary">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title">Primary card</h5>
        <p class="card-text">Some text.</p>
    </div>
</div>

Border

Use border utilities to change just the border-color of a card.

Header

Primary border

Some text.

Header

Secondary border

Some text.

Header

Success border

Some text.

<div class="card border-primary">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
        <h5 class="card-title">Primary border</h5>
        <p class="card-text">Some text.</p>
    </div>
</div>

Card Groups

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

Card title

This is a wider card with supporting text below.

Last updated 3 mins ago

Card title

This card has supporting text below.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below.

Last updated 3 mins ago

<div class="card-group">
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Text</p>
        </div>
    </div>
    <!-- More cards -->
</div>

Grid Cards

Use the Bootstrap grid system to control how many grid columns you show per row.

Card title

This is a longer card with supporting text below.

Last updated 3 mins ago

Card title

This is a short card.

Last updated 3 mins ago

Card title

This is a longer card with supporting text.

Last updated 3 mins ago

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Text</p>
            </div>
        </div>
    </div>
</div>

Pricing Cards

Modern pricing cards with highlighted popular plans, perfect for subscription-based services.

Basic

$9/month

10 Users
5GB Storage
Email Support
Basic Features

Most Popular

Pro

$29/month

Unlimited Users
50GB Storage
Priority Support
Advanced Features

Enterprise

$99/month

Unlimited Users
Unlimited Storage
24/7 Phone Support
All Features

<div class="row g-4">
    <div class="col-md-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <h5 class="card-title text-uppercase text-muted mb-3">Basic</h5>
                <h2 class="display-4 fw-bold mb-3">$9<small class="text-muted fs-6">/month</small></h2>
                <ul class="list-unstyled mt-4 mb-4">
                    <li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>10 Users</li>
                    <li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>5GB Storage</li>
                </ul>
                <button class="btn btn-outline-primary w-100">Get Started</button>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100 shadow border-primary">
            <div class="position-absolute top-0 start-50 translate-middle">
                <span class="badge bg-primary px-3 py-2">Most Popular</span>
            </div>
            <div class="card-body text-center pt-5">
                <h5 class="card-title text-uppercase text-primary mb-3">Pro</h5>
                <h2 class="display-4 fw-bold mb-3">$29<small class="text-muted fs-6">/month</small></h2>
                <button class="btn btn-primary w-100">Get Started</button>
            </div>
        </div>
    </div>
</div>

Product Cards

E-commerce product cards with image, pricing, ratings, and shopping features.

Sale

Premium Headphones

(124 reviews)

$79.99 $99.99

New

Smart Watch Pro

(89 reviews)

$299.99

Wireless Speaker

(56 reviews)

$149.99

<div class="card h-100 shadow-sm">
    <div class="position-relative">
        <img src="product.jpg" class="card-img-top" alt="Product">
        <span class="badge bg-danger position-absolute top-0 start-0 m-2">Sale</span>
        <button class="btn btn-light position-absolute top-0 end-0 m-2 rounded-circle p-2">
            <i class="bi bi-heart"></i>
        </button>
    </div>
    <div class="card-body">
        <h5 class="card-title">Premium Headphones</h5>
        <div class="mb-2">
            <span class="text-warning">
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-half"></i>
            </span>
            <small class="text-muted ms-1">(124 reviews)</small>
        </div>
        <div class="mb-3">
            <span class="h4 text-primary fw-bold">$79.99</span>
            <span class="text-muted text-decoration-line-through ms-2">$99.99</span>
        </div>
        <button class="btn btn-primary w-100">
            <i class="bi bi-cart-plus me-2"></i>Add to Cart
        </button>
    </div>
</div>

Stats Cards

Dashboard metric cards displaying key statistics with trend indicators.

Total Users

12,543

12.5% from last month

Revenue

$45,892

8.2% from last month

Orders

3,241

3.1% from last month

Conversion

3.24%

5.7% from last month

<div class="card shadow-sm h-100">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
                <h6 class="text-muted mb-2">Total Users</h6>
                <h2 class="fw-bold mb-0">12,543</h2>
            </div>
            <div class="bg-primary bg-opacity-10 rounded p-3">
                <i class="bi bi-people-fill text-primary fs-4"></i>
            </div>
        </div>
        <div class="text-success">
            <i class="bi bi-arrow-up"></i>
            <small class="fw-semibold">12.5%</small>
            <small class="text-muted ms-1">from last month</small>
        </div>
    </div>
</div>

Profile Cards

User profile cards with avatar, bio, statistics, and action buttons.

John Doe

Senior Developer

Passionate about building great products and solving complex problems with elegant solutions.

1,234

Followers

567

Following

89

Posts

Alice Smith

Product Designer

Creating beautiful and intuitive user experiences. Coffee enthusiast and design systems advocate.

2,891

Followers

432

Following

156

Posts

<div class="card shadow-sm h-100">
    <div class="card-body text-center">
        <img src="avatar.jpg" class="rounded-circle mb-3" alt="User Avatar" width="120" height="120">
        <h5 class="card-title mb-1">John Doe</h5>
        <p class="text-muted mb-3">Senior Developer</p>
        <p class="card-text text-muted small mb-4">Passionate about building great products.</p>
        <div class="row text-center mb-4">
            <div class="col-4">
                <h5 class="fw-bold mb-0">1,234</h5>
                <small class="text-muted">Followers</small>
            </div>
            <div class="col-4">
                <h5 class="fw-bold mb-0">567</h5>
                <small class="text-muted">Following</small>
            </div>
            <div class="col-4">
                <h5 class="fw-bold mb-0">89</h5>
                <small class="text-muted">Posts</small>
            </div>
        </div>
        <div class="d-flex gap-2 mb-3 justify-content-center">
            <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle">
                <i class="bi bi-twitter"></i>
            </a>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-primary flex-fill">Follow</button>
            <button class="btn btn-outline-primary flex-fill">Message</button>
        </div>
    </div>
</div>

Testimonial Cards

Customer testimonial cards with quotes, ratings, and customer information.

This product has completely transformed how we work. The interface is intuitive, the features are powerful, and the support team is outstanding!

Sarah Chen

CEO, TechStart Inc.

Outstanding service and quality! The team went above and beyond to ensure our success. I highly recommend this to anyone looking for excellence.

Michael Rodriguez

Marketing Director, Global Co.

Incredible value for money. The features are exactly what we needed, and the implementation was smooth and hassle-free from start to finish.

Emily Parker

Founder, Design Studio

<div class="card shadow-sm h-100">
    <div class="card-body">
        <div class="text-primary mb-3">
            <i class="bi bi-quote display-4"></i>
        </div>
        <p class="card-text fst-italic mb-3">
            This product has completely transformed how we work. The interface is intuitive!
        </p>
        <div class="mb-3">
            <span class="text-warning">
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill"></i>
            </span>
        </div>
        <div class="d-flex align-items-center">
            <img src="avatar.jpg" class="rounded-circle me-3" alt="Customer" width="50" height="50">
            <div>
                <h6 class="mb-0">Sarah Chen</h6>
                <small class="text-muted">CEO, TechStart Inc.</small>
            </div>
        </div>
    </div>
</div>

Notification Cards

Alert-style notification cards with colored borders, icons, and action buttons.

Success

2 min ago

Your profile has been successfully updated with all the latest information.

Error

5 min ago

Unable to process your payment. Please check your payment information and try again.

Warning

15 min ago

Your subscription will expire in 3 days. Renew now to continue enjoying premium features.

Information

1 hour ago

New features are now available! Check out our latest updates and improvements.

<div class="card notification-card notification-success">
    <div class="card-body">
        <div class="d-flex">
            <div class="notification-icon bg-success">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div class="flex-grow-1">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h6 class="fw-bold mb-0">Success</h6>
                    <small class="text-muted">2 min ago</small>
                </div>
                <p class="mb-3 text-muted">Your profile has been successfully updated.</p>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-success">View</button>
                    <button class="btn btn-sm btn-outline-secondary">Dismiss</button>
                </div>
            </div>
        </div>
    </div>
</div>

Blog Cards

Article cards with featured images, category badges, and author information.

Technology

Getting Started with Design Systems

Learn how to build and maintain a scalable design system for your organization. This comprehensive guide covers everything...

John Doe 5 min read

Nov 24, 2025

Development

Modern CSS Techniques for 2025

Explore the latest CSS features and techniques that will help you create stunning web experiences with less code...

Alice Smith 8 min read

Nov 22, 2025

UX Design

User Experience Best Practices

Discover essential UX principles that will help you create intuitive and delightful user experiences for your products...

Mike Ross 6 min read

Nov 20, 2025

<div class="card h-100 shadow-sm">
    <div class="position-relative">
        <img src="blog-image.jpg" class="card-img-top" alt="Blog Post">
        <span class="badge bg-primary position-absolute top-0 start-0 m-3">Technology</span>
    </div>
    <div class="card-body">
        <h5 class="card-title">Getting Started with Design Systems</h5>
        <p class="card-text text-muted">Learn how to build and maintain a scalable design system...</p>
        <div class="d-flex align-items-center justify-content-between mt-3">
            <div class="d-flex align-items-center">
                <img src="avatar.jpg" class="rounded-circle me-2" alt="Author" width="32" height="32">
                <div>
                    <small class="fw-semibold d-block">John Doe</small>
                    <small class="text-muted">5 min read</small>
                </div>
            </div>
            <button class="btn btn-link text-muted p-0">
                <i class="bi bi-bookmark fs-5"></i>
            </button>
        </div>
        <div class="mt-2">
            <small class="text-muted">Nov 24, 2025</small>
        </div>
    </div>
</div>

Event Cards

Event schedule cards with date badges, location information, and attendee avatars.

DEC

15

Web Design Conference 2025

San Francisco, CA

9:00 AM - 5:00 PM

+24

DEC

20

Tech Innovation Summit

New York, NY

10:00 AM - 6:00 PM

+38

JAN

05

UX Workshop Series

Austin, TX

2:00 PM - 4:00 PM

+15

JAN

12

DevOps Masterclass

Seattle, WA

1:00 PM - 5:00 PM

+42

<div class="card shadow-sm">
    <div class="card-body">
        <div class="d-flex">
            <div class="event-date-badge">
                <div class="month">DEC</div>
                <div class="day">15</div>
            </div>
            <div class="flex-grow-1">
                <h5 class="card-title mb-2">Web Design Conference 2025</h5>
                <div class="mb-2">
                    <i class="bi bi-geo-alt-fill text-muted me-2"></i>
                    <small class="text-muted">San Francisco, CA</small>
                </div>
                <div class="mb-3">
                    <i class="bi bi-clock-fill text-muted me-2"></i>
                    <small class="text-muted">9:00 AM - 5:00 PM</small>
                </div>
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="avatar-stack">
                            <img src="avatar1.jpg" class="rounded-circle" width="32" height="32">
                            <img src="avatar2.jpg" class="rounded-circle" width="32" height="32">
                            <img src="avatar3.jpg" class="rounded-circle" width="32" height="32">
                            <span class="avatar-more">+24</span>
                        </div>
                    </div>
                    <button class="btn btn-primary btn-sm">Join Event</button>
                </div>
            </div>
        </div>
    </div>
</div>

Widget Cards

Dashboard widget cards with headers, dropdown menus, chart areas, and detail links.

Revenue Overview

$52,340

12.5% vs last month

View Details

Traffic Sources

125,430

8.3% vs last month

View Details

Conversion Rate

3.24%

2.1% vs last month

View Details

<div class="card shadow-sm h-100">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold">Revenue Overview</h6>
        <div class="dropdown">
            <button class="btn btn-sm btn-link text-muted p-0" type="button" data-bs-toggle="dropdown">
                <i class="bi bi-three-dots-vertical"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#">Last 7 days</a></li>
                <li><a class="dropdown-item" href="#">Last 30 days</a></li>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <div class="widget-chart-area">
            <!-- Chart SVG or placeholder -->
        </div>
        <div class="mt-3">
            <h4 class="fw-bold mb-0">$52,340</h4>
            <small class="text-success">
                <i class="bi bi-arrow-up"></i> 12.5% vs last month
            </small>
        </div>
    </div>
    <div class="card-footer bg-white">
        <a href="#" class="text-decoration-none small">View Details <i class="bi bi-arrow-right"></i></a>
    </div>
</div>

Feature Cards

Service feature cards with large icons, descriptions, and hover effects.

Fast Performance

Lightning-fast load times and optimized performance ensure your users have the best experience possible.

Secure & Reliable

Enterprise-grade security with 99.9% uptime guarantee. Your data is always protected and accessible.

Easy to Use

Intuitive interface designed for everyone. Get started in minutes without any technical knowledge required.

<div class="card h-100 shadow-sm text-center">
    <div class="card-body">
        <div class="feature-icon mb-4">
            <i class="bi bi-lightning-charge-fill"></i>
        </div>
        <h5 class="card-title fw-bold mb-3">Fast Performance</h5>
        <p class="card-text text-muted">
            Lightning-fast load times and optimized performance.
        </p>
        <a href="#" class="btn btn-link text-decoration-none p-0">
            Learn More <i class="bi bi-arrow-right"></i>
        </a>
    </div>
</div>