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="Guided tours">
<div class="card-body">
<h5 class="card-title">Airport transfers</h5>
<p class="card-text">This honest story lets customers coming back for teams of every size.</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
The practical experience checklist
The new flexible dates helps your work organised all year round. This clear team lets data easy to understand all year round.
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-semibold"><i class="bi bi-megaphone-fill" aria-hidden="true"></i> Announcement</span><span class="badge text-bg-primary">Team</span>
</div>
<div class="card-body">
<h5 class="card-title">The practical experience checklist</h5>
<p class="card-text">The new flexible dates helps your work organised all year round. This clear team lets data easy to understand all year round.</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
- 24/7 assistance
- Curated stays
Most popular
Team
$29/mo
- Best price guarantee
- Free cancellation
- 24/7 assistance
Business
$79/mo
- Local guides
- Best price guarantee
- Flexible dates
- Best price guarantee
<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> 24/7 assistance</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Curated stays</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> Best price guarantee</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Free cancellation</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> 24/7 assistance</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> Local guides</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Best price guarantee</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Flexible dates</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Best price guarantee</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.
Noah Quinn
Product Designer · Melbourne
85
Posts85.7k
Followers201
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="Noah Quinn" class="rounded-circle border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Noah Quinn</h5>
<p class="text-body-secondary small">Product Designer · Melbourne</p>
<div class="d-flex justify-content-around border-top border-bottom py-2 mb-3 small">
<div>
<div class="fw-bold">
85
</div>
Posts
</div>
<div>
<div class="fw-bold">
85.7k
</div>
Followers
</div>
<div>
<div class="fw-bold">
201
</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.
Inside the simple plan
A fast project makes your work organised with friendly support.
Updated yesterday
<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="How we rebuilt our experience">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">Inside the simple plan</h5>
<p class="card-text">A fast project makes your work organised with friendly support.</p>
<p class="card-text"><small class="text-body-secondary">Updated yesterday</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="Stay somewhere unforgettable">
<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">Adventure</span>
<h4 class="card-title">Explore more, worry less</h4>
<p class="card-text small mb-0">Dec 1, 2025</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$16,879.17
16% vs last month
New customers
2.1k
4% vs last month
Orders
2.0k
20% vs last month
Refund rate
3.5%
23% 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">
$16,879.17
</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> 16% 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.1k
</div>
</div>
<span class="rounded-3 p-2 bg-success-subtle text-success-emphasis"><i class="bi bi-people-fill" 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">
Orders
</div>
<div class="fs-4 fw-bold">
2.0k
</div>
</div>
<span class="rounded-3 p-2 bg-warning-subtle text-warning-emphasis"><i class="bi bi-cart-check-fill" aria-hidden="true"></i></span>
</div>
<div class="small mt-2 text-success">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 20% 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">
3.5%
</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> 23% vs last month
</div>
</div>
</div>
</div>
</div>8Card with list group
A flush list group inside a card, with a footer link.
Top trips
- Island hopping tour862
- City break68
- Weekend getaway24
<div class="card" style="max-width: 22rem;">
<div class="card-header fw-semibold">
Top trips
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">Island hopping tour<span class="text-body-secondary">862</span></li>
<li class="list-group-item d-flex justify-content-between">City break<span class="text-body-secondary">68</span></li>
<li class="list-group-item d-flex justify-content-between">Weekend getaway<span class="text-body-secondary">24</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.
Our holiday packages connects the whole team on the same page at a fair price. A modern idea shows new ideas to life from the very first day.
- Best price guarantee
- 24/7 assistance
“The new curated stays makes every detail in view all year round.”
<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">Our holiday packages connects the whole team on the same page at a fair price. A modern idea shows new ideas to life from the very first day.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>Best price guarantee</li>
<li>24/7 assistance</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> “The new curated stays makes every detail in view all year round.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
A fast community brings customers coming back with friendly support.
Success
This bright update gives complex tasks into simple steps all year round.
Danger
The new free cancellation turns your work organised with friendly support.
Warning
The new curated stays makes every detail in view at a fair price.
Info
The new flexible dates brings every detail in view without the usual hassle.
Dark
The new best price guarantee brings time back in your day 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 text-bg-primary h-100">
<div class="card-header">
Primary
</div>
<div class="card-body">
<p class="card-text small mb-0">A fast community brings customers coming back with friendly support.</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">This bright update gives complex tasks into simple steps all year round.</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">The new free cancellation turns your work organised with friendly support.</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">The new curated stays makes every detail in view at a fair price.</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">The new flexible dates brings every detail in view without the usual hassle.</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">The new best price guarantee brings time back in your day without the usual hassle.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
Our holiday packages brings projects moving forward for teams of every size.
Success border
The new best price guarantee brings your work organised wherever you are.
Danger border
This powerful team guides data easy to understand in just a few clicks.
<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">Our holiday packages brings projects moving forward for teams of every size.</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">The new best price guarantee brings your work organised wherever you are.</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 powerful team guides data easy to understand in just a few clicks.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-17%City
Safari adventure
(556)
$52.00
Adventure
City break
(26)
$9.00
Mountain
Ocean view suite
(455)
$203.50
<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="Safari adventure"><span class="badge text-bg-danger position-absolute top-0 start-0 m-2">-17%</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-fill" aria-hidden="true"></i></button>
</div>
<div class="card-body d-flex flex-column">
<div class="small text-body-secondary">
City
</div>
<h6 class="card-title">Safari adventure</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.9 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> <span class="text-body-secondary">(556)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$52.00</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" 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="City break">
<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-fill" aria-hidden="true"></i></button>
</div>
<div class="card-body d-flex flex-column">
<div class="small text-body-secondary">
Adventure
</div>
<h6 class="card-title">City break</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.9 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> <span class="text-body-secondary">(26)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$9.00</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" 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="Ocean view suite">
<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-fill" aria-hidden="true"></i></button>
</div>
<div class="card-body d-flex flex-column">
<div class="small text-body-secondary">
Mountain
</div>
<h6 class="card-title">Ocean view suite</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.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> <span class="text-body-secondary">(455)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$203.50</span>
<button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add</button>
</div>
</div>
</div>
</div>
</div>13Blog post card
Category, title, excerpt and an author footer with avatar.
how-to
3 lessons from our launch
The new local guides brings projects moving forward wherever you are.
Ravi Rossi
Jul 24, 2026 · 11 min read
<div class="card h-100" style="max-width: 22rem;">
<img src="../assets/img/photo-8.svg" class="card-img-top" alt="9 lessons from our release">
<div class="card-body">
<span class="badge bg-primary-subtle text-primary-emphasis mb-2">how-to</span>
<h5 class="card-title"><a href="#" class="link-body-emphasis text-decoration-none">3 lessons from our launch</a></h5>
<p class="card-text text-body-secondary">The new local guides brings projects moving forward wherever you are.</p>
</div>
<div class="card-footer bg-transparent d-flex align-items-center gap-2">
<img src="../assets/img/avatar-3.svg" alt="Ravi Rossi" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="small">
<div class="fw-semibold">
Ravi Rossi
</div>
<div class="text-body-secondary">
Jul 24, 2026 · 11 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Practical launch
Our hotel booking guides complex tasks into simple steps wherever you are.
Simple workflow
A reliable release helps results you can measure in just a few clicks.
Clear routine
The new free cancellation makes every detail in view at a fair price.
<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">Practical launch</h5>
<p class="card-text small">Our hotel booking guides complex tasks into simple steps wherever you are.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">yesterday</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">Simple workflow</h5>
<p class="card-text small">A reliable release helps results you can measure in just a few clicks.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">2 hours ago</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">Clear routine</h5>
<p class="card-text small">The new free cancellation makes every detail in view at a fair price.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">just now</small>
</div>
</div>
</div>15Responsive card grid
row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.
Practical launch
The new 24/7 assistance connects decisions quicker and clearer wherever you are.
Friendly update
This calm plan guides results you can measure without the usual hassle. The new 24/7 assistance helps decisions quicker and clearer from the very first day.
Powerful workflow
The new local guides brings your work organised in just a few clicks.
Secure update
This clear plan connects customers coming back all year round. The new local guides turns you focused on what matters with friendly support.
<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">Practical launch</h6>
<p class="card-text small text-body-secondary mb-0">The new 24/7 assistance connects decisions quicker and clearer wherever you are.</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">Friendly update</h6>
<p class="card-text small text-body-secondary mb-0">This calm plan guides results you can measure without the usual hassle. The new 24/7 assistance helps decisions quicker and clearer from the very first day.</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">Powerful workflow</h6>
<p class="card-text small text-body-secondary mb-0">The new local guides brings your work organised 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-8.svg" class="card-img-top" alt="Project 4">
<div class="card-body">
<h6 class="card-title">Secure update</h6>
<p class="card-text small text-body-secondary mb-0">This clear plan connects customers coming back all year round. The new local guides turns you focused on what matters with friendly support.</p>
</div>
</div>
</div>
</div>16Testimonial card
A quote with rating and the customer's photo and role.
The new 24/7 assistance keeps every detail in view without extra tools. This clear update lets the whole team on the same page from the very first day.
Kai Moreau
Project Manager
<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">The new 24/7 assistance keeps every detail in view without extra tools. This clear update lets the whole team on the same page from the very first day.</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-9.svg" alt="Kai Moreau" class="rounded-circle flex-shrink-0" width="44" height="44">
<div>
<div class="fw-semibold">
Kai Moreau
</div>
<div class="small text-body-secondary">
Project Manager
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Omar Larsen placed a new order
4 hours ago
Mateo Silva left a comment
yesterday
Leo Fischer joined the team
yesterday
<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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Omar Larsen</strong> placed a new order
<div class="text-body-secondary">
4 hours ago
</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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Mateo Silva</strong> left a comment
<div class="text-body-secondary">
yesterday
</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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Leo Fischer</strong> joined the team
<div class="text-body-secondary">
yesterday
</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 14 newsletter
One email a month. This modern workflow helps results you can measure for teams of every size.
<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-fill" aria-hidden="true"></i>
</div>
<h5 class="card-title">Get the Brand name 14 newsletter</h5>
<p class="card-text text-body-secondary small">One email a month. This modern workflow helps results you can measure for teams of every size.</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.
<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-fill" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">24/7 assistance</a></h5>
<p class="card-text small text-body-secondary mb-0">The new free cancellation guides every detail in view all year round.</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-fill" aria-hidden="true"></i></span>
<h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Local guides</a></h5>
<p class="card-text small text-body-secondary mb-0">This simple plan gives decisions quicker and clearer from the very first day.</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">24/7 assistance</a></h5>
<p class="card-text small text-body-secondary mb-0">A modern release shows decisions quicker and clearer without extra tools.</p>
</div>
</div>
</div>
</div>