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="Dental care">
<div class="card-body">
<h5 class="card-title">Dental care</h5>
<p class="card-text">The new family plans turns new ideas to life with friendly support.</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
5 lessons from our process
A modern update connects your work organised all year round. This friendly community turns data easy to understand with friendly support.
<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">5 lessons from our process</h5>
<p class="card-text">A modern update connects your work organised all year round. This friendly community turns data easy to understand with friendly support.</p>
</div>
<div class="card-footer text-body-secondary small">
Posted 12 hours ago
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Insurance friendly
- Same-day appointments
Most popular
Team
$29/mo
- Insurance friendly
- Online results
- Certified specialists
Business
$79/mo
- Family plans
- Family plans
- Reminders
- Family plans
<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> Insurance friendly</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Same-day appointments</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> Insurance friendly</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Online results</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Certified specialists</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> Family plans</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Family plans</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Reminders</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Family plans</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.
Tariq Ibrahim
Marketing Lead · Singapore
149
Posts80.9k
Followers278
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-11.svg" alt="Tariq Ibrahim" class="rounded-circle border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Tariq Ibrahim</h5>
<p class="text-body-secondary small">Marketing Lead · Singapore</p>
<div class="d-flex justify-content-around border-top border-bottom py-2 mb-3 small">
<div>
<div class="fw-bold">
149
</div>
Posts
</div>
<div>
<div class="fw-bold">
80.9k
</div>
Followers
</div>
<div>
<div class="fw-bold">
278
</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 smart idea
The new reminders connects customers coming back on any device.
Updated just now
<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 honest process checklist">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">Inside the smart idea</h5>
<p class="card-text">The new reminders connects customers coming back on any device.</p>
<p class="card-text"><small class="text-body-secondary">Updated just now</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="Book a doctor in minutes">
<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">Pediatrics</span>
<h4 class="card-title">Feel better with expert care</h4>
<p class="card-text small mb-0">Oct 5, 2025</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$42,917.72
14% vs last month
New customers
5.0k
12% vs last month
Orders
3.0k
4% vs last month
Refund rate
3.2%
19% 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">
$42,917.72
</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> 14% 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">
5.0k
</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> 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">
3.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> 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">
3.2%
</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> 19% vs last month
</div>
</div>
</div>
</div>
</div>8Card with list group
A flush list group inside a card, with a footer link.
Top services
- Video consult358
- Blood test99
- Annual check-up18
<div class="card" style="max-width: 22rem;">
<div class="card-header fw-semibold">
Top services
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">Video consult<span class="text-body-secondary">358</span></li>
<li class="list-group-item d-flex justify-content-between">Blood test<span class="text-body-secondary">99</span></li>
<li class="list-group-item d-flex justify-content-between">Annual check-up<span class="text-body-secondary">18</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 insurance friendly lets you focused on what matters on any device. A secure team turns new ideas to life in just a few clicks.
- Certified specialists
- Reminders
“Our physiotherapy connects customers coming back without the usual hassle.”
<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 insurance friendly lets you focused on what matters on any device. A secure team turns new ideas to life in just a few clicks.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>Certified specialists</li>
<li>Reminders</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> “Our physiotherapy connects customers coming back without the usual hassle.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
A bright journey helps data easy to understand on any device.
Success
This calm team helps data easy to understand on any device.
Danger
The new certified specialists turns complex tasks into simple steps for teams of every size.
Warning
The new reminders brings your work organised with friendly support.
Info
This elegant goal guides projects moving forward at a fair price.
Dark
This smart team guides you focused on what matters with friendly support.
<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 bright journey helps data easy to understand on any device.</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 calm team helps data easy to understand on any device.</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 certified specialists turns complex tasks into simple steps for teams of every size.</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 reminders brings your work organised with friendly support.</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">This elegant goal guides projects moving forward at a fair price.</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 smart team guides you focused on what matters with friendly support.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
Our health check-ups guides you focused on what matters all year round.
Success border
This modern community turns results you can measure for teams of every size.
Danger border
This flexible experience shows customers coming back with friendly support.
<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 health check-ups guides you focused on what matters all year round.</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">This modern community turns results you can measure for teams of every size.</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 flexible experience shows customers coming back with friendly support.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-34%Orthopedics
Vaccination
(827)
$393.99
Dermatology
Dental cleaning
(501)
$153.00
Orthopedics
Video consult
(595)
$194.00
<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="Vaccination"><span class="badge text-bg-danger position-absolute top-0 start-0 m-2">-34%</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">
Orthopedics
</div>
<h6 class="card-title">Vaccination</h6>
<div class="small mb-2">
<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> <span class="text-body-secondary">(827)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$393.99</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="Dental cleaning">
<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">
Dermatology
</div>
<h6 class="card-title">Dental cleaning</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">(501)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$153.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="Video consult">
<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">
Orthopedics
</div>
<h6 class="card-title">Video consult</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 3.7 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-fill" aria-hidden="true"></i></span> <span class="text-body-secondary">(595)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$194.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>13Blog post card
Category, title, excerpt and an author footer with avatar.
how-to
4 lessons from our project
A reliable routine brings you focused on what matters without the usual hassle.
Nadia Ashford
Aug 31, 2026 · 7 min read
<div class="card h-100" style="max-width: 22rem;">
<img src="../assets/img/photo-8.svg" class="card-img-top" alt="How we rebuilt our plan">
<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">4 lessons from our project</a></h5>
<p class="card-text text-body-secondary">A reliable routine brings you focused on what matters without the usual hassle.</p>
</div>
<div class="card-footer bg-transparent d-flex align-items-center gap-2">
<img src="../assets/img/avatar-9.svg" alt="Nadia Ashford" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="small">
<div class="fw-semibold">
Nadia Ashford
</div>
<div class="text-body-secondary">
Aug 31, 2026 · 7 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Fast workflow
A reliable idea connects your work organised on any device.
Bright workflow
A practical community lets your work organised for teams of every size.
Friendly launch
Our physiotherapy connects the whole team on the same page wherever you are.
<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">Fast workflow</h5>
<p class="card-text small">A reliable idea connects your work organised on any device.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">4 hours 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">Bright workflow</h5>
<p class="card-text small">A practical community lets your work organised for teams of every size.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">6 days 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">Friendly launch</h5>
<p class="card-text small">Our physiotherapy connects the whole team on the same page wherever you are.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">12 hours ago</small>
</div>
</div>
</div>15Responsive card grid
row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.
Clear goal
This smart update connects customers coming back at a fair price.
Reliable routine
This simple story keeps every detail in view on any device. The new reminders makes decisions quicker and clearer in just a few clicks.
Elegant story
Our health check-ups lets results you can measure in just a few clicks.
Reliable project
This bright launch shows time back in your day with friendly support. Our health check-ups lets new ideas to life without the usual hassle.
<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">Clear goal</h6>
<p class="card-text small text-body-secondary mb-0">This smart update connects customers coming back 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-6.svg" class="card-img-top" alt="Project 2">
<div class="card-body">
<h6 class="card-title">Reliable routine</h6>
<p class="card-text small text-body-secondary mb-0">This simple story keeps every detail in view on any device. The new reminders makes decisions quicker and clearer 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-7.svg" class="card-img-top" alt="Project 3">
<div class="card-body">
<h6 class="card-title">Elegant story</h6>
<p class="card-text small text-body-secondary mb-0">Our health check-ups lets results you can measure 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">Reliable project</h6>
<p class="card-text small text-body-secondary mb-0">This bright launch shows time back in your day with friendly support. Our health check-ups lets new ideas to life without the usual hassle.</p>
</div>
</div>
</div>
</div>16Testimonial card
A quote with rating and the customer's photo and role.
The new same-day appointments keeps time back in your day from the very first day. A fast update lets projects moving forward on any device.
Mateo Alvarez
Art Director
<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 same-day appointments keeps time back in your day from the very first day. A fast update lets projects moving forward on any device.</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-12.svg" alt="Mateo Alvarez" class="rounded-circle flex-shrink-0" width="44" height="44">
<div>
<div class="fw-semibold">
Mateo Alvarez
</div>
<div class="small text-body-secondary">
Art Director
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Mason Harlow placed a new order
37 min ago
Freya Patel left a comment
5 days ago
Finn Larsen joined the team
24 min 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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Mason Harlow</strong> placed a new order
<div class="text-body-secondary">
37 min 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>Freya Patel</strong> left a comment
<div class="text-body-secondary">
5 days ago
</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>Finn Larsen</strong> joined the team
<div class="text-body-secondary">
24 min 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 1 newsletter
One email a month. The new reminders turns your work organised without extra tools.
<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 1 newsletter</h5>
<p class="card-text text-body-secondary small">One email a month. The new reminders turns your work organised without extra tools.</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.
Certified specialists
This practical update connects decisions quicker and clearer in just a few clicks.
<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">Certified specialists</a></h5>
<p class="card-text small text-body-secondary mb-0">This practical update connects decisions quicker and clearer in just a few clicks.</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">Online results</a></h5>
<p class="card-text small text-body-secondary mb-0">A practical release shows you focused on what matters 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">Online results</a></h5>
<p class="card-text small text-body-secondary mb-0">Our dental care lets every detail in view on any device.</p>
</div>
</div>
</div>
</div>