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="https://images.unsplash.com/photo-1614088459293-5669fadc3448?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Hotel booking">
<div class="card-body">
<h5 class="card-title">Guided tours</h5>
<p class="card-text">Our team has done this many times, so you never have to guess.</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
Hidden beaches of the Mediterranean
We listen first, then build a plan around what you actually need. Our travel experts are on call around the clock while you are away.
<div class="card">
<div class="card-header flex justify-between items-center">
<span class="font-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">Hidden beaches of the Mediterranean</h5>
<p class="card-text">We listen first, then build a plan around what you actually need. Our travel experts are on call around the clock while you are away.</p>
</div>
<div class="card-footer text-muted small">
Posted 13 hours ago
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Curated stays
- Free cancellation
Most popular
Team
$29/mo
- 24/7 assistance
- 24/7 assistance
- Flexible dates
Business
$79/mo
- Flexible dates
- Best price guarantee
- Free cancellation
- Best price guarantee
<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
<div class="col">
<div class="card h-full">
<div class="card-header">
</div>
<div class="card-body flex flex-col">
<h5 class="card-title">Starter</h5>
<div class="display-6 font-bold my-2">
$9<small class="text-base font-normal text-muted">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-6">
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Curated stays</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Free cancellation</li>
</ul>
<button type="button" class="btn btn-outline-primary mt-auto w-full">Choose Starter</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-full border-primary shadow-md">
<div class="card-header text-bg-primary">
Most popular
</div>
<div class="card-body flex flex-col">
<h5 class="card-title">Team</h5>
<div class="display-6 font-bold my-2">
$29<small class="text-base font-normal text-muted">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-6">
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> 24/7 assistance</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> 24/7 assistance</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Flexible dates</li>
</ul>
<button type="button" class="btn btn-primary mt-auto w-full">Choose Team</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="card-header">
</div>
<div class="card-body flex flex-col">
<h5 class="card-title">Business</h5>
<div class="display-6 font-bold my-2">
$79<small class="text-base font-normal text-muted">/mo</small>
</div>
<ul class="list-unstyled small text-start mx-auto mb-6">
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Flexible dates</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Best price guarantee</li>
<li class="mb-1"><span class="text-success-emphasis"><i class="bi bi-check2" aria-hidden="true"></i></span> Free cancellation</li>
<li class="mb-1"><span class="text-success-emphasis"><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-full">Choose Business</button>
</div>
</div>
</div>
</div>4Profile card
Cover image, overlapping avatar, stats and actions for a user profile.
Hana Varga
Sales Executive · Toronto
94
Posts75.6k
Followers886
Following<div class="card text-center overflow-hidden" style="max-width: 20rem;">
<img src="https://images.unsplash.com/photo-1529260830199-42c24126f198?auto=format&fit=crop&w=1600&h=700&q=70" class="card-img-top object-cover" style="height: 90px;" alt="">
<div class="card-body pt-0">
<img src="../assets/img/avatar-11.svg" alt="Hana Varga" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Hana Varga</h5>
<p class="text-muted small">Sales Executive · Toronto</p>
<div class="flex justify-around border-t border-b py-2 mb-4 small">
<div>
<div class="font-bold">
94
</div>
Posts
</div>
<div>
<div class="font-bold">
75.6k
</div>
Followers
</div>
<div>
<div class="font-bold">
886
</div>
Following
</div>
</div>
<div class="flex gap-2 justify-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.
Our favourite tips for busy weeks
Our team has done this many times, so you never have to guess.
Updated yesterday
<div class="card overflow-hidden" style="max-width: 560px;">
<div class="row g-0">
<div class="col-sm-4">
<img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=800&h=800&q=70" class="img-fluid h-full object-cover" alt="Five things we learned this year">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">Our favourite tips for busy weeks</h5>
<p class="card-text">Our team has done this many times, so you never have to guess.</p>
<p class="card-text"><small class="text-muted">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="https://images.unsplash.com/photo-1606922183036-62e19495eaab?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img" alt="Trips designed around you">
<div class="card-img-overlay flex flex-col justify-end ca-card-shade">
<span class="badge text-bg-light self-start mb-2">Culture</span>
<h4 class="card-title">Hand-picked stays in beautiful places</h4>
<p class="card-text small mb-0">Mar 9, 2026</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$14,129.12
12% vs last month
New customers
680
8% vs last month
Orders
513
9% vs last month
Refund rate
2.9%
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-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
Revenue
</div>
<div class="text-xl font-bold">
$14,129.12
</div>
</div>
<span class="rounded-lg 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-emphasis">
<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-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
New customers
</div>
<div class="text-xl font-bold">
680
</div>
</div>
<span class="rounded-lg 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-emphasis">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 8% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
Orders
</div>
<div class="text-xl font-bold">
513
</div>
</div>
<span class="rounded-lg 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-emphasis">
<i class="bi bi-arrow-up-right" aria-hidden="true"></i> 9% vs last month
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="card-body">
<div class="flex justify-between items-start">
<div>
<div class="small text-muted">
Refund rate
</div>
<div class="text-xl font-bold">
2.9%
</div>
</div>
<span class="rounded-lg 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-emphasis">
<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
- Old town walk787
- City break67
- Northern lights trip20
<div class="card" style="max-width: 22rem;">
<div class="card-header font-semibold">
Top trips
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item flex justify-between">Old town walk<span class="text-muted">787</span></li>
<li class="list-group-item flex justify-between">City break<span class="text-muted">67</span></li>
<li class="list-group-item flex justify-between">Northern lights trip<span class="text-muted">20</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.
We listen first, then build a plan around what you actually need. We find the best price, and if you see it cheaper we match it.
- 24/7 assistance
- 24/7 assistance
“From city breaks to safaris, we plan trips around how you like to travel.”
<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">We listen first, then build a plan around what you actually need. We find the best price, and if you see it cheaper we match it.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>24/7 assistance</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-emphasis" 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> “From city breaks to safaris, we plan trips around how you like to travel.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
Travel insurance and car rental can be added in a single click.
Success
Airport transfers, tours and dinners are arranged before you arrive.
Danger
Family rooms, adults-only retreats and pet-friendly stays in one search.
Warning
Clear prices, honest advice and no surprises along the way.
Info
Free cancellation on most stays means you can book now and decide later.
Dark
Thousands of travellers already trust us, and we work hard to keep it that way.
<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-full">
<div class="card-header">
Primary
</div>
<div class="card-body">
<p class="card-text small mb-0">Travel insurance and car rental can be added in a single click.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-success h-full">
<div class="card-header">
Success
</div>
<div class="card-body">
<p class="card-text small mb-0">Airport transfers, tours and dinners are arranged before you arrive.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-danger h-full">
<div class="card-header">
Danger
</div>
<div class="card-body">
<p class="card-text small mb-0">Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning h-full">
<div class="card-header">
Warning
</div>
<div class="card-body">
<p class="card-text small mb-0">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-info h-full">
<div class="card-header">
Info
</div>
<div class="card-body">
<p class="card-text small mb-0">Free cancellation on most stays means you can book now and decide later.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-dark h-full">
<div class="card-header">
Dark
</div>
<div class="card-body">
<p class="card-text small mb-0">Thousands of travellers already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
Start in minutes and get help from a real person whenever you need it.
Success border
Flexible dates help you find quieter weeks and better prices.
Danger border
Friendly people answer your questions quickly, by phone, chat or email.
<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-full">
<div class="card-header bg-transparent border-primary text-primary-ink font-semibold">
Primary border
</div>
<div class="card-body">
<p class="card-text small mb-0">Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-success h-full">
<div class="card-header bg-transparent border-success text-success-emphasis font-semibold">
Success border
</div>
<div class="card-body">
<p class="card-text small mb-0">Flexible dates help you find quieter weeks and better prices.</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-danger h-full">
<div class="card-header bg-transparent border-danger text-danger-emphasis font-semibold">
Danger border
</div>
<div class="card-body">
<p class="card-text small mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-14%Mountain
Ski chalet
(520)
$320.99
City
Weekend getaway
(902)
$152.99
Beach
Surf camp
(288)
$469.00
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-10.svg" class="card-img-top" alt="Ski chalet"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-14%</span>
<button type="button" class="btn btn-light btn-sm rounded-full 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 flex flex-col">
<div class="small text-muted">
Mountain
</div>
<h6 class="card-title">Ski chalet</h6>
<div class="small mb-2">
<span class="text-warning-emphasis" aria-label="Rated 4.4 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-muted">(520)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$320.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-full">
<div class="relative">
<img src="../assets/img/product-6.svg" class="card-img-top" alt="Weekend getaway">
<button type="button" class="btn btn-light btn-sm rounded-full 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 flex flex-col">
<div class="small text-muted">
City
</div>
<h6 class="card-title">Weekend getaway</h6>
<div class="small mb-2">
<span class="text-warning-emphasis" aria-label="Rated 4.4 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-muted">(902)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$152.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-full">
<div class="relative">
<img src="../assets/img/product-12.svg" class="card-img-top" alt="Surf camp">
<button type="button" class="btn btn-light btn-sm rounded-full 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 flex flex-col">
<div class="small text-muted">
Beach
</div>
<h6 class="card-title">Surf camp</h6>
<div class="small mb-2">
<span class="text-warning-emphasis" aria-label="Rated 4.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-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i></span> <span class="text-muted">(288)</span>
</div>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-bold">$469.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.
tutorial
Travelling with kids: our tried and tested tips
Local guides show you the places that never make it into guidebooks.
Leo Duarte
Nov 21, 2025 · 3 min read
<div class="card h-full" style="max-width: 22rem;">
<img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Looking back at a busy season">
<div class="card-body">
<span class="badge bg-primary-subtle text-primary-emphasis mb-2">tutorial</span>
<h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">Travelling with kids: our tried and tested tips</a></h5>
<p class="card-text text-muted">Local guides show you the places that never make it into guidebooks.</p>
</div>
<div class="card-footer bg-transparent flex items-center gap-2">
<img src="../assets/img/avatar-8.svg" alt="Leo Duarte" class="rounded-full shrink-0" width="32" height="32">
<div class="small">
<div class="font-semibold">
Leo Duarte
</div>
<div class="text-muted">
Nov 21, 2025 · 3 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Elegant dashboard
We measure success by how many travellers come back and tell their friends.
Bright idea
Every hotel on our list is visited and reviewed by our own travel team.
Modern idea
Members get room upgrades and late check-out at selected hotels.
<div class="card-group">
<div class="card">
<img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Gallery image 1">
<div class="card-body">
<h5 class="card-title">Elegant dashboard</h5>
<p class="card-text small">We measure success by how many travellers come back and tell their friends.</p>
</div>
<div class="card-footer">
<small class="text-muted">just now</small>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1605130284535-11dd9eedc58a?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Gallery image 2">
<div class="card-body">
<h5 class="card-title">Bright idea</h5>
<p class="card-text small">Every hotel on our list is visited and reviewed by our own travel team.</p>
</div>
<div class="card-footer">
<small class="text-muted">58 min ago</small>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1553355202-f869c36581ca?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Gallery image 3">
<div class="card-body">
<h5 class="card-title">Modern idea</h5>
<p class="card-text small">Members get room upgrades and late check-out at selected hotels.</p>
</div>
<div class="card-footer">
<small class="text-muted">16 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.
Simple update
We keep things simple, so you can focus on what matters to you.
Smart community
Every trip supports local businesses and responsible tourism. Every detail is handled by people who care about getting it right.
Smart goal
We find the best price, and if you see it cheaper we match it.
Practical story
Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1553355202-f869c36581ca?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 1">
<div class="card-body">
<h6 class="card-title">Simple update</h6>
<p class="card-text small text-muted mb-0">We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1682685797208-c741d58c2eff?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 2">
<div class="card-body">
<h6 class="card-title">Smart community</h6>
<p class="card-text small text-muted mb-0">Every trip supports local businesses and responsible tourism. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1614088459293-5669fadc3448?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 3">
<div class="card-body">
<h6 class="card-title">Smart goal</h6>
<p class="card-text small text-muted mb-0">We find the best price, and if you see it cheaper we match it.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1783443076547-fb9cb67224a0?auto=format&fit=crop&w=800&h=800&q=70" class="card-img-top" alt="Project 4">
<div class="card-body">
<h6 class="card-title">Practical story</h6>
<p class="card-text small text-muted mb-0">Our team has done this many times, so you never have to guess. Airport transfers, tours and dinners are arranged before you arrive.</p>
</div>
</div>
</div>
</div>16Testimonial card
A quote with rating and the customer's photo and role.
Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.
Zoe Rossi
Frontend Engineer
<div class="card border-0 bg-surface-3" style="max-width: 30rem;">
<div class="card-body p-6">
<div class="text-4xl leading-none text-primary-ink">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="blockquote mb-4"><p class="text-base">Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.</p></blockquote>
<div class="mb-4">
<span class="text-warning-emphasis" 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="flex items-center gap-4">
<img src="../assets/img/avatar-9.svg" alt="Zoe Rossi" class="rounded-full shrink-0" width="44" height="44">
<div>
<div class="font-semibold">
Zoe Rossi
</div>
<div class="small text-muted">
Frontend Engineer
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Freya Whitaker placed a new order
just now
Nadia Delgado left a comment
5 days ago
Maya Haddad joined the team
just now
<div class="card" style="max-width: 26rem;">
<div class="card-header flex justify-between items-center">
<span class="font-semibold">Recent activity</span><a href="#" class="small">See all</a>
</div>
<div class="card-body">
<div class="flex gap-4 mb-4">
<span class="rounded-full bg-success-subtle text-success-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-cart-check-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Freya Whitaker</strong> placed a new order
<div class="text-muted">
just now
</div>
</div>
</div>
<div class="flex gap-4 mb-4">
<span class="rounded-full bg-primary-subtle text-primary-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-chat-left-text-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Nadia Delgado</strong> left a comment
<div class="text-muted">
5 days ago
</div>
</div>
</div>
<div class="flex gap-4 mb-4">
<span class="rounded-full bg-info-subtle text-info-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-person-plus-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Maya Haddad</strong> joined the team
<div class="text-muted">
just now
</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-surface-2" 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 Orbiora newsletter
One email a month. Thousands of travellers already trust us, and we work hard to keep it that way.
<div class="card text-center" style="max-width: 26rem;">
<div class="card-body p-6">
<div class="text-3xl text-primary-ink">
<i class="bi bi-envelope-paper-fill" aria-hidden="true"></i>
</div>
<h5 class="card-title">Get the Orbiora newsletter</h5>
<p class="card-text text-muted small">One email a month. Thousands of travellers already trust us, and we work hard to keep it that way.</p>
<form class="flex flex-col sm:flex-row gap-2">
<label class="sr-only" 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 whitespace-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-full ca-card-hover">
<div class="card-body">
<span class="inline-flex rounded-lg p-2 mb-4 text-xl 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 no-underline">Free cancellation</a></h5>
<p class="card-text small text-muted mb-0">We measure success by how many travellers come back and tell their friends.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full ca-card-hover">
<div class="card-body">
<span class="inline-flex rounded-lg p-2 mb-4 text-xl 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 no-underline">Free cancellation</a></h5>
<p class="card-text small text-muted mb-0">Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-full ca-card-hover">
<div class="card-body">
<span class="inline-flex rounded-lg p-2 mb-4 text-xl 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 no-underline">Free cancellation</a></h5>
<p class="card-text small text-muted mb-0">Free cancellation on most stays means you can book now and decide later.</p>
</div>
</div>
</div>
</div>