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.
Live workshops
Every course is built around hands-on projects you can add to your portfolio.
Learn more<div class="card" style="max-width: 20rem;">
<img src="https://images.unsplash.com/photo-1758270705290-62b6294dd044?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Certificates">
<div class="card-body">
<h5 class="card-title">Live workshops</h5>
<p class="card-text">Every course is built around hands-on projects you can add to your portfolio.</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
What our students asked us most
We keep things simple, so you can focus on what matters to you. Thousands of students already trust us, and we work hard to keep it that way.
<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">What our students asked us most</h5>
<p class="card-text">We keep things simple, so you can focus on what matters to you. Thousands of students already trust us, and we work hard to keep it that way.</p>
</div>
<div class="card-footer text-body-secondary small">
Posted yesterday
</div>
</div>3Pricing cards
Three plans with equal heights; the recommended plan is highlighted.
Starter
$9/mo
- Community forum
- Lifetime access
Most popular
Team
$29/mo
- Mobile learning
- Expert mentors
- Lifetime access
Business
$79/mo
- Expert mentors
- Expert mentors
- Expert mentors
- Expert mentors
<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> Community forum</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Lifetime access</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> Mobile learning</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Expert mentors</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Lifetime access</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> Expert mentors</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Expert mentors</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Expert mentors</li>
<li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Expert mentors</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.
Lea Hughes
Product Designer · Seoul
292
Posts88.6k
Followers471
Following<div class="card text-center overflow-hidden" style="max-width: 20rem;">
<img src="https://images.unsplash.com/photo-1758270705518-b61b40527e76?auto=format&fit=crop&w=1600&h=700&q=70" class="card-img-top object-fit-cover" style="height: 90px;" alt="">
<div class="card-body pt-0">
<img src="../assets/img/avatar-6.svg" alt="Lea Hughes" class="rounded-circle border border-4 border-white ca-card-av" width="88" height="88">
<h5 class="card-title mt-2 mb-0">Lea Hughes</h5>
<p class="text-body-secondary small">Product Designer · Seoul</p>
<div class="d-flex justify-content-around border-top border-bottom py-2 mb-3 small">
<div>
<div class="fw-bold">
292
</div>
Posts
</div>
<div>
<div class="fw-bold">
88.6k
</div>
Followers
</div>
<div>
<div class="fw-bold">
471
</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.
Our favourite tips for busy weeks
Try the first lesson of any course for free before you decide.
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-1525130413817-d45c1d127c42?auto=format&fit=crop&w=800&h=800&q=70" class="img-fluid h-100 object-fit-cover" alt="How we build a course, start to finish">
</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">Try the first lesson of any course for free before you decide.</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="https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img" alt="Skills employers are looking for">
<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">Development</span>
<h4 class="card-title">Grow your career one lesson at a time</h4>
<p class="card-text small mb-0">Jun 23, 2026</p>
</div>
</div>7KPI cards
Small stat cards for dashboards: value, trend and a tinted icon.
Revenue
$89,142.20
4% vs last month
New customers
7.9k
22% vs last month
Orders
8.8k
20% vs last month
Refund rate
4.9%
15% 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">
$89,142.20
</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">
7.9k
</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> 22% 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">
8.8k
</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">
4.9%
</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> 15% vs last month
</div>
</div>
</div>
</div>
</div>8Card with list group
A flush list group inside a card, with a footer link.
Top courses
- Data analysis757
- Data analysis61
- Copywriting18
<div class="card" style="max-width: 22rem;">
<div class="card-header fw-semibold">
Top courses
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">Data analysis<span class="text-body-secondary">757</span></li>
<li class="list-group-item d-flex justify-content-between">Data analysis<span class="text-body-secondary">61</span></li>
<li class="list-group-item d-flex justify-content-between">Copywriting<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.
Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way.
- Hands-on projects
- Quizzes
“Instructors are working professionals who teach what they use every 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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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">Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way.</p>
</div>
<div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
<ul class="mb-0">
<li>Hands-on projects</li>
<li>Quizzes</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> “Instructors are working professionals who teach what they use every day.”</p>
</div>
</div>
</div>10Background colours
text-bg-* colours the whole card with matching readable text.
Primary
Guided learning paths take you from beginner to job-ready step by step.
Success
The mobile app downloads lessons, so you can learn on the train.
Danger
Clear prices, honest advice and no surprises along the way.
Warning
Learn on your schedule, with lessons that fit into a lunch break.
Info
We keep things simple, so you can focus on what matters to you.
Dark
Lifetime access means you can revisit lessons whenever you need a refresher.
<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">Guided learning paths take you from beginner to job-ready step by step.</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">The mobile app downloads lessons, so you can learn on the train.</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">Clear prices, honest advice and no surprises along the way.</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">Learn on your schedule, with lessons that fit into a lunch break.</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">We keep things simple, so you can focus on what matters to you.</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">Lifetime access means you can revisit lessons whenever you need a refresher.</p>
</div>
</div>
</div>
</div>11Border colours
border-* utilities colour just the outline and header line.
Primary border
Friendly people answer your questions quickly, by phone, chat or email.
Success border
Career coaches help with your CV, portfolio and interview practice.
Danger border
Every detail is handled by people who care about getting it right.
<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">Friendly people answer your questions quickly, by phone, chat or email.</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">Career coaches help with your CV, portfolio and interview practice.</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">Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>12Product cards
Shop cards with label, wishlist button, rating, price and add-to-cart.
-20%Development
Python basics
(169)
$129.00
Business
Project management
(835)
$179.00
Design
Video editing
(541)
$111.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-9.svg" class="card-img-top" alt="Python basics"><span class="badge text-bg-danger position-absolute top-0 start-0 m-2">-20%</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">
Development
</div>
<h6 class="card-title">Python basics</h6>
<div class="small mb-2">
<span class="text-warning" aria-label="Rated 4.1 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">(169)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$129.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-6.svg" class="card-img-top" alt="Project management">
<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">
Business
</div>
<h6 class="card-title">Project management</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">(835)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$179.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-12.svg" class="card-img-top" alt="Video editing">
<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">
Design
</div>
<h6 class="card-title">Video editing</h6>
<div class="small mb-2">
<span class="text-warning" 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-body-secondary">(541)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<span class="fs-5 fw-bold">$111.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.
tips
A beginner's guide to getting started
Mentors review your projects and give feedback within two days.
Isla Carter
Dec 11, 2025 · 7 min read
<div class="card h-100" style="max-width: 22rem;">
<img src="https://images.unsplash.com/photo-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="How to stay motivated when learning online">
<div class="card-body">
<span class="badge bg-primary-subtle text-primary-emphasis mb-2">tips</span>
<h5 class="card-title"><a href="#" class="link-body-emphasis text-decoration-none">A beginner's guide to getting started</a></h5>
<p class="card-text text-body-secondary">Mentors review your projects and give feedback within two days.</p>
</div>
<div class="card-footer bg-transparent d-flex align-items-center gap-2">
<img src="../assets/img/avatar-7.svg" alt="Isla Carter" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="small">
<div class="fw-semibold">
Isla Carter
</div>
<div class="text-body-secondary">
Dec 11, 2025 · 7 min read
</div>
</div>
</div>
</div>14Card group
card-group joins cards edge to edge with equal heights; they stack below sm.
Fast update
Short quizzes after each lesson help new knowledge stick.
Clear workflow
We measure success by how many students come back and tell their friends.
Clear dashboard
We listen first, then build a plan around what you actually need.
<div class="card-group">
<div class="card">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?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">Fast update</h5>
<p class="card-text small">Short quizzes after each lesson help new knowledge stick.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">3 hours ago</small>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1620829813573-7c9e1877706f?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">Clear workflow</h5>
<p class="card-text small">We measure success by how many students come back and tell their friends.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">27 min ago</small>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1752650736024-d6aac18abc2d?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">Clear dashboard</h5>
<p class="card-text small">We listen first, then build a plan around what you actually need.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">20 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.
Smart goal
Start in minutes and get help from a real person whenever you need it.
Secure plan
Our team has done this many times, so you never have to guess. Earn a certificate at the end of each course and share it with employers.
Clear launch
Friendly people answer your questions quickly, by phone, chat or email.
Clear launch
Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way.
<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="https://images.unsplash.com/photo-1752650736024-d6aac18abc2d?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">Smart goal</h6>
<p class="card-text small text-body-secondary 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-100 shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?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">Secure plan</h6>
<p class="card-text small text-body-secondary mb-0">Our team has done this many times, so you never have to guess. Earn a certificate at the end of each course and share it with employers.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1758270705290-62b6294dd044?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">Clear launch</h6>
<p class="card-text small text-body-secondary mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?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">Clear launch</h6>
<p class="card-text small text-body-secondary mb-0">Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way.</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. Instructors are working professionals who teach what they use every day.
Hana Brennan
Marketing Lead
<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">Clear prices, honest advice and no surprises along the way. Instructors are working professionals who teach what they use every 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-8.svg" alt="Hana Brennan" class="rounded-circle flex-shrink-0" width="44" height="44">
<div>
<div class="fw-semibold">
Hana Brennan
</div>
<div class="small text-body-secondary">
Marketing Lead
</div>
</div>
</div>
</div>
</div>17Activity card
A dashboard widget listing recent events with tinted icons.
Recent activitySee all
Liam Rossi placed a new order
44 min ago
Aria Patel left a comment
35 min ago
Mateo Fischer joined the team
1 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-fill" aria-hidden="true"></i></span>
<div class="small">
<strong>Liam Rossi</strong> placed a new order
<div class="text-body-secondary">
44 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>Aria Patel</strong> left a comment
<div class="text-body-secondary">
35 min 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>Mateo Fischer</strong> joined the team
<div class="text-body-secondary">
1 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 Fableova Co newsletter
One email a month. Guided learning paths take you from beginner to job-ready step by step.
<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 Fableova Co newsletter</h5>
<p class="card-text text-body-secondary small">One email a month. Guided learning paths take you from beginner to job-ready step by step.</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">Community forum</a></h5>
<p class="card-text small text-body-secondary mb-0">Try the first lesson of any course for free before you decide.</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">Mobile learning</a></h5>
<p class="card-text small text-body-secondary 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-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">Community forum</a></h5>
<p class="card-text small text-body-secondary mb-0">Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>