Card
Cards are flexible content containers with optional header, footer, images and lists. Use them for products, profiles, pricing plans, dashboard widgets and articles, and lay them out with the grid, card groups or row-cols for equal heights.
1Basic card
Image on top, a title, some text and a button.
<div class="card" style="max-width: 20rem;">
<img src="../assets/img/photo-1.svg" class="card-img-top" alt="Yoga">
<div class="card-body">
<h5 class="card-title">Group classes</h5>
<p class="card-text">A calm routine brings you focused on what matters on any device.</p>
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>2Header and footer
card-header and card-footer frame the body; the footer often holds meta text.
AnnouncementTeam
A guide to group classes
A clear idea lets new ideas to life without the usual hassle. The new progress tracking keeps decisions quicker and clearer wherever you are.
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-semibold"><i class="bi bi-megaphone" aria-hidden="true"></i> Announcement</span><span class="badge text-bg-primary">Team</span>
</div>
<div class="card-body">
<h5 class="card-title">A guide to group classes</h5>
<p class="card-text">A clear idea lets new ideas to life without the usual hassle. The new progress tracking keeps decisions quicker and clearer wherever you are.</p>
</div>
<div class="card-footer text-body-secondary small">
Posted just now
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Certified coaches
- Modern equipment
Most popular
Team
$29/mo
- Certified coaches
- Modern equipment
- Flexible plans
Business
$79/mo
- Flexible plans
- Community events
- Progress tracking
- Progress tracking
<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
<div class="col">
<div class="card h-100 ">
<div class="card-header">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Starter</h5>
<div class="display-6 fw-bold my-2">
$9<small class="fs-6 fw-normal text-body-secondary">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-4">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Certified coaches</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Modern equipment</li>
</ul>
<button type="button" class="btn btn-outline-primary mt-auto w-100">Choose Starter</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 border-primary shadow">
<div class="card-header text-bg-primary">
Most popular
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Team</h5>
<div class="display-6 fw-bold my-2">
$29<small class="fs-6 fw-normal text-body-secondary">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-4">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Certified coaches</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Modern equipment</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Flexible plans</li>
</ul>
<button type="button" class="btn btn-primary mt-auto w-100">Choose Team</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 ">
<div class="card-header">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Business</h5>
<div class="display-6 fw-bold my-2">
$79<small class="fs-6 fw-normal text-body-secondary">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-4">
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Flexible plans</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Community events</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Progress tracking</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Progress tracking</li>
</ul>
<button type="button" class="btn btn-outline-primary mt-auto w-100">Choose Business</button>
</div>
</div>
</div>
</div>4Profile card
Cover image, overlapping avatar, stats and actions for a user profile.
Isla Patel
Sales Executive · Copenhagen
156
Posts26.3k
Followers284
Following<div class="card text-center overflow-hidden" style="max-width: 20rem;">
<img src="../assets/img/wide-2.svg" class="card-img-top object-fit-cover" style="height: 90px;" alt="">
<div class="card-body pt-0">
<img src="../assets/img/avatar-9.svg" alt="Isla Patel" class="rounded-circle border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Isla Patel</h5>
<p class="text-body-secondary small">Sales Executive · Copenhagen</p>
<div class="d-flex justify-content-around border-top border-bottom py-2 mb-3 small">
<div>
<div class="fw-bold">
156
</div>
Posts
</div>
<div>
<div class="fw-bold">
26.3k
</div>
Followers
</div>
<div>
<div class="fw-bold">
284
</div>
Following
</div>
</div>
<div class="d-flex gap-2 justify-content-center">
<button type="button" class="btn btn-primary btn-sm">Follow</button>
<button type="button" class="btn btn-outline-secondary btn-sm">Message</button>
</div>
</div>
</div>5Horizontal card
Image and text side by side using the grid; it stacks on small screens.
How we rebuilt our journey
This practical workflow keeps new ideas to life in just a few clicks.
Updated 45 min ago
<div class="card overflow-hidden" style="max-width: 560px;">
<div class="row g-0">
<div class="col-sm-4">
<img src="../assets/img/square-3.svg" class="img-fluid h-100 object-fit-cover" alt="The focused launch checklist">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">How we rebuilt our journey</h5>
<p class="card-text">This practical workflow keeps new ideas to life in just a few clicks.</p>
<p class="card-text"><small class="text-body-secondary">Updated 45 min ago</small></p>
</div>
</div>
</div>
</div>6Image overlay
Text over the image with card-img-overlay and a dark gradient for contrast.
<div class="card text-white border-0 overflow-hidden" style="max-width: 32rem;">
<img src="../assets/img/photo-6.svg" class="card-img" alt="Your fitness journey starts now">
<div class="card-img-overlay d-flex flex-column justify-content-end ca-card-shade">
<span class="badge text-bg-light align-self-start mb-2">Strength</span>
<h4 class="card-title">Move more, stress less</h4>
<p class="card-text small mb-0">Jan 7, 2026</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$81,890.64
4% vs last month
New customers
2.0k
12% vs last month
Orders
9.0k
4% vs last month
Refund rate
4.8%
8% vs last month
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
Revenue
</div>
<div class="fs-4 fw-bold">
$81,890.64
</div>
</div>
<span class="rounded-3 p-2 bg-primary-subtle text-primary-emphasis"><i class="bi bi-currency-dollar" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 4% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
New customers
</div>
<div class="fs-4 fw-bold">
2.0k
</div>
</div>
<span class="rounded-3 p-2 bg-success-subtle text-success-emphasis"><i class="bi bi-people" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 12% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
Orders
</div>
<div class="fs-4 fw-bold">
9.0k
</div>
</div>
<span class="rounded-3 p-2 bg-warning-subtle text-warning-emphasis"><i class="bi bi-cart-check" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 4% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="small text-body-secondary">
Refund rate
</div>
<div class="fs-4 fw-bold">
4.8%
</div>
</div>
<span class="rounded-3 p-2 bg-danger-subtle text-danger-emphasis"><i class="bi bi-graph-down-arrow" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-danger">
<i class="bi bi-arrow-down-right" aria-hidden="true"></i> 8% vs last month
</div>
</div>
</div>
</div>
</div>8Card with list group
A flush list group inside a card, with a footer link.
Top classs
- Yoga retreat340
- Yoga retreat91
- Coaching plan41
<div class="card" style="max-width: 22rem;">
<div class="card-header fw-semibold">
Top classs
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">Yoga retreat<span class="text-body-secondary">340</span></li>
<li class="list-group-item d-flex justify-content-between">Yoga retreat<span class="text-body-secondary">91</span></li>
<li class="list-group-item d-flex justify-content-between">Coaching plan<span class="text-body-secondary">41</span></li>
</ul>
<div class="card-footer bg-transparent">
<a href="#" class="small">View all <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
</div>
</div>9Card with tabs
Nav tabs in the card header switch the body content through the tab data API.
The new modern equipment gives customers coming back without the usual hassle. Our yoga guides results you can measure without extra tools.
- Progress tracking
- Open 24/7
“A elegant plan helps you focused on what matters from the very first day.”
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="ctab-877-tab" data-ui-toggle="tab" data-ui-target="#ctab-877" type="button" role="tab" aria-controls="ctab-877" aria-selected="true">Overview</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="ctab-878-tab" data-ui-toggle="tab" data-ui-target="#ctab-878" type="button" role="tab" aria-controls="ctab-878" aria-selected="false">Specs</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="ctab-879-tab" data-ui-toggle="tab" data-ui-target="#ctab-879" type="button" role="tab" aria-controls="ctab-879" aria-selected="false">Reviews</button></li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane fade show active" id="ctab-877" role="tabpanel" aria-labelledby="ctab-877-tab" tabindex="0">
<p class="mb-0">The new modern equipment gives customers coming back without the usual hassle. Our yoga guides results you can measure without extra tools.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>Progress tracking</li>
<li>Open 24/7</li>
</ul>
</div>
<div class="tab-pane fade" id="ctab-879" role="tabpanel" aria-labelledby="ctab-879-tab" tabindex="0">
<p class="mb-0"><span class="text-warning" aria-label="Rated 4.5 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i></span> “A elegant plan helps you focused on what matters from the very first day.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
This fast launch helps complex tasks into simple steps wherever you are.
Success
Our personal training keeps you focused on what matters without the usual hassle.
Danger
Our personal training turns data easy to understand wherever you are.
Warning
Our recovery spa keeps results you can measure in just a few clicks.
Info
A honest release guides decisions quicker and clearer with friendly support.
Dark
This simple dashboard helps results you can measure all year round.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card text-bg-primary h-100">
<div class="card-header">
Primary
</div>
<div class="card-body">
<p class="card-text small mb-0">This fast launch helps complex tasks into simple steps wherever you are.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-success h-100">
<div class="card-header">
Success
</div>
<div class="card-body">
<p class="card-text small mb-0">Our personal training keeps you focused on what matters without the usual hassle.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-danger h-100">
<div class="card-header">
Danger
</div>
<div class="card-body">
<p class="card-text small mb-0">Our personal training turns data easy to understand wherever you are.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning h-100">
<div class="card-header">
Warning
</div>
<div class="card-body">
<p class="card-text small mb-0">Our recovery spa keeps results you can measure in just a few clicks.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-info h-100">
<div class="card-header">
Info
</div>
<div class="card-body">
<p class="card-text small mb-0">A honest release guides decisions quicker and clearer with friendly support.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-dark h-100">
<div class="card-header">
Dark
</div>
<div class="card-body">
<p class="card-text small mb-0">This simple dashboard helps results you can measure all year round.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
This fast launch keeps time back in your day on any device.
Success border
A clear project gives complex tasks into simple steps from the very first day.
Danger border
This honest idea lets decisions quicker and clearer without the usual hassle.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card border-primary h-100">
<div class="card-header bg-transparent border-primary text-primary fw-semibold">
Primary border
</div>
<div class="card-body">
<p class="card-text small mb-0">This fast launch keeps time back in your day on any device.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-success h-100">
<div class="card-header bg-transparent border-success text-success fw-semibold">
Success border
</div>
<div class="card-body">
<p class="card-text small mb-0">A clear project gives complex tasks into simple steps from the very first day.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-danger h-100">
<div class="card-header bg-transparent border-danger text-danger fw-semibold">
Danger border
</div>
<div class="card-body">
<p class="card-text small mb-0">This honest idea lets decisions quicker and clearer without the usual hassle.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-29%Cardio
Yoga retreat
(589)
$44.99
Recovery
Nutrition guide
(179)
$91.00
Cardio
Day pass
(264)
$209.99
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card h-100">
<div class="position-relative">
<img src="../assets/img/product-1.svg" class="card-img-top" alt="Yoga retreat"><span class="badge text-bg-danger position-absolute top-0 start-0 m-2">-29%</span>
<button type="button" class="btn btn-light btn-sm rounded-circle position-absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart" aria-hidden="true"></i></button>
</div>
<div class="card-body d-flex flex-column">
<div class="small text-body-secondary">
Cardio
</div>
<h6 class="card-title">Yoga retreat</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 3.5 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i></span> <span class="text-body-secondary">(589)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$44.99</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="position-relative">
<img src="../assets/img/product-2.svg" class="card-img-top" alt="Nutrition guide">
<button type="button" class="btn btn-light btn-sm rounded-circle position-absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart" aria-hidden="true"></i></button>
</div>
<div class="card-body d-flex flex-column">
<div class="small text-body-secondary">
Recovery
</div>
<h6 class="card-title">Nutrition guide</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.2 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i></span> <span class="text-body-secondary">(179)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$91.00</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="position-relative">
<img src="../assets/img/product-3.svg" class="card-img-top" alt="Day pass">
<button type="button" class="btn btn-light btn-sm rounded-circle position-absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart" aria-hidden="true"></i></button>
</div>
<div class="card-body d-flex flex-column">
<div class="small text-body-secondary">
Cardio
</div>
<h6 class="card-title">Day pass</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 3.8 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i></span> <span class="text-body-secondary">(264)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$209.99</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
</div>13Blog post card
Category, title, excerpt and an author footer with avatar.
release
Flexible ways to improve your experience
This flexible plan keeps customers coming back all year round.
Theo Carter
Aug 22, 2026 · 8 min read
<div class="card h-100" style="max-width: 22rem;">
<img src="../assets/img/photo-8.svg" class="card-img-top" alt="Secure ways to improve your journey">
<div class="card-body">
<span class="badge bg-primary-subtle text-primary-emphasis mb-2">release</span>
<h5 class="card-title"><a href="#" class="link-body-emphasis text-decoration-none">Flexible ways to improve your experience</a></h5>
<p class="card-text text-body-secondary">This flexible plan keeps customers coming back all year round.</p>
</div>
<div class="card-footer bg-transparent d-flex align-items-center gap-2">
<img src="../assets/img/avatar-12.svg" alt="Theo Carter" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="small">
<div class="fw-semibold">
Theo Carter
</div>
<div class="text-body-secondary">
Aug 22, 2026 · 8 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Clear community
This friendly project connects decisions quicker and clearer all year round.
Smart goal
A flexible goal lets complex tasks into simple steps for teams of every size.
Friendly process
A smart story brings every detail in view without the usual hassle.
<div class="card-group">
<div class="card">
<img src="../assets/img/photo-9.svg" class="card-img-top" alt="Gallery image 1">
<div class="card-body">
<h5 class="card-title">Clear community</h5>
<p class="card-text small">This friendly project connects decisions quicker and clearer all year round.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">5 days ago</small>
</div>
</div>
<div class="card">
<img src="../assets/img/photo-10.svg" class="card-img-top" alt="Gallery image 2">
<div class="card-body">
<h5 class="card-title">Smart goal</h5>
<p class="card-text small">A flexible goal lets complex tasks into simple steps for teams of every size.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">just now</small>
</div>
</div>
<div class="card">
<img src="../assets/img/photo-11.svg" class="card-img-top" alt="Gallery image 3">
<div class="card-body">
<h5 class="card-title">Friendly process</h5>
<p class="card-text small">A smart story brings every detail in view without the usual hassle.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">yesterday</small>
</div>
</div>
</div>15Responsive card grid
row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.
Smart experience
This fast community brings new ideas to life in just a few clicks.
Flexible launch
A clear journey connects data easy to understand without extra tools. The new open 24/7 makes new ideas to life for teams of every size.
Simple process
This bright workflow shows data easy to understand at a fair price.
Honest community
The new open 24/7 brings time back in your day in just a few clicks. Our nutrition plans keeps every detail in view at a fair price.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="../assets/img/square-5.svg" class="card-img-top" alt="Project 1">
<div class="card-body">
<h6 class="card-title">Smart experience</h6>
<p class="card-text small text-body-secondary mb-0">This fast community brings new ideas to life in just a few clicks.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="../assets/img/square-6.svg" class="card-img-top" alt="Project 2">
<div class="card-body">
<h6 class="card-title">Flexible launch</h6>
<p class="card-text small text-body-secondary mb-0">A clear journey connects data easy to understand without extra tools. The new open 24/7 makes new ideas to life for teams of every size.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="../assets/img/square-7.svg" class="card-img-top" alt="Project 3">
<div class="card-body">
<h6 class="card-title">Simple process</h6>
<p class="card-text small text-body-secondary mb-0">This bright workflow shows data easy to understand at a fair price.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="../assets/img/square-8.svg" class="card-img-top" alt="Project 4">
<div class="card-body">
<h6 class="card-title">Honest community</h6>
<p class="card-text small text-body-secondary mb-0">The new open 24/7 brings time back in your day in just a few clicks. Our nutrition plans keeps every detail in view at a fair price.</p>
</div>
</div>
</div>
</div>16Testimonial card
A quote with rating and the customer's photo and role.
A modern plan lets the whole team on the same page with friendly support. A modern workflow shows new ideas to life with friendly support.
Priya Rossi
HR Partner
<div class="card border-0 bg-body-tertiary" style="max-width: 30rem;">
<div class="card-body p-4">
<div class="fs-1 lh-1 text-primary">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="blockquote mb-3"><p class="fs-6">A modern plan lets the whole team on the same page with friendly support. A modern workflow shows new ideas to life with friendly support.</p></blockquote>
<div class="mb-3">
<span class="text-warning" aria-label="Rated 5.0 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span>
</div>
<div class="d-flex align-items-center gap-3">
<img src="../assets/img/avatar-2.svg" alt="Priya Rossi" class="rounded-circle flex-shrink-0" width="44" height="44">
<div>
<div class="fw-semibold">
Priya Rossi
</div>
<div class="small text-body-secondary">
HR Partner
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Nora Delgado placed a new order
just now
Kai Nguyen left a comment
just now
Maya Lindqvist joined the team
6 days ago
<div class="card" style="max-width: 26rem;">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-semibold">Recent activity</span><a href="#" class="small">See all</a>
</div>
<div class="card-body">
<div class="d-flex gap-3 mb-3">
<span class="rounded-circle bg-success-subtle text-success-emphasis d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-cart-check" aria-hidden="true"></i></span>
<div class="small">
<strong>Nora Delgado</strong> placed a new order
<div class="text-body-secondary">
just now
</div>
</div>
</div>
<div class="d-flex gap-3 mb-3">
<span class="rounded-circle bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-chat-left-text" aria-hidden="true"></i></span>
<div class="small">
<strong>Kai Nguyen</strong> left a comment
<div class="text-body-secondary">
just now
</div>
</div>
</div>
<div class="d-flex gap-3 mb-3">
<span class="rounded-circle bg-info-subtle text-info-emphasis d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-person-plus" aria-hidden="true"></i></span>
<div class="small">
<strong>Maya Lindqvist</strong> joined the team
<div class="text-body-secondary">
6 days ago
</div>
</div>
</div>
</div>
</div>18Loading placeholder
placeholder-glow shapes stand in for content while it loads.
<div class="card" aria-hidden="true" style="max-width: 20rem;">
<div class="bg-body-secondary" style="height: 140px;">
</div>
<div class="card-body">
<h5 class="card-title placeholder-glow"><span class="placeholder col-6"></span></h5>
<p class="card-text placeholder-glow"><span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span></p>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>19Newsletter card
A card with a small form for collecting email sign-ups.
Get the Brand name 18 newsletter
One email a month. Our group classes guides results you can measure from the very first day.
<div class="card text-center" style="max-width: 26rem;">
<div class="card-body p-4">
<div class="fs-2 text-primary">
<i class="bi bi-envelope-paper" aria-hidden="true"></i>
</div>
<h5 class="card-title">Get the Brand name 18 newsletter</h5>
<p class="card-text text-body-secondary small">One email a month. Our group classes guides results you can measure from the very first day.</p>
<form class="d-flex flex-column flex-sm-row gap-2">
<label class="visually-hidden" for="news-email-880">Email address</label>
<input type="email" class="form-control" id="news-email-880" placeholder="you@example.com">
<button type="submit" class="btn btn-primary text-nowrap">Subscribe</button>
</form>
</div>
</div>20Clickable feature cards
stretched-link makes the whole card clickable; a hover lift shows it.
Modern equipment
The new progress tracking brings complex tasks into simple steps without the usual hassle.
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card h-100 ca-card-hover">
<div class="card-body">
<span class="d-inline-flex rounded-3 p-2 mb-3 fs-4 bg-primary-subtle text-primary-emphasis"><i class="bi bi-lightning-charge" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Modern equipment</a></h5>
<p class="card-text small text-body-secondary mb-0">The new progress tracking brings complex tasks into simple steps without the usual hassle.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 ca-card-hover">
<div class="card-body">
<span class="d-inline-flex rounded-3 p-2 mb-3 fs-4 bg-primary-subtle text-primary-emphasis"><i class="bi bi-shield-lock" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Certified coaches</a></h5>
<p class="card-text small text-body-secondary mb-0">Our nutrition plans connects customers coming back without the usual hassle.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 ca-card-hover">
<div class="card-body">
<span class="d-inline-flex rounded-3 p-2 mb-3 fs-4 bg-primary-subtle text-primary-emphasis"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Progress tracking</a></h5>
<p class="card-text small text-body-secondary mb-0">Our yoga guides time back in your day without extra tools.</p>
</div>
</div>
</div>
</div>