In this practical project, we will create a complete responsive course listing section using Bootstrap Cards. You will learn how to combine cards, images, badges, buttons, lists, grid columns, Flexbox, spacing, shadows, headers, footers, and responsive utilities.
Our project will display different courses using Bootstrap cards.
Each course card can contain:
The cards will automatically adjust according to the screen size.
Start with a standard HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Cards Project
</title>
</head>
<body>
Course Cards
</body>
</html>
Add Bootstrap CSS inside the
<head> section.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">Bootstrap CSS provides the card, grid, button, spacing, badge, and other utility classes used in this project.
Use a Bootstrap container to organize the course section.
<div class="container py-5">
Course Section
</div>
The py-5 utility adds vertical padding.
Create a centered heading above the course cards.
<div class="text-center mb-5">
<h1>
Our Popular Courses
</h1>
<p class="lead">
Choose a course and
start learning today.
</p>
</div>
The mb-5 utility adds space below the heading.
Use the Bootstrap grid system to arrange the cards.
<div class="row g-4">
Course Cards
</div>
The g-4 class adds spacing between rows and columns.
Create responsive columns for the course cards.
<div
class="col-12
col-md-6
col-lg-4">
Course Card
</div>This layout displays:
A basic Bootstrap card uses the
card and card-body classes.
<div class="card">
<div class="card-body">
Card Content
</div>
</div>The card body provides padding around the content.
Use card-title for the main title.
<div class="card-body">
<h3 class="card-title">
Bootstrap Course
</h3>
</div>The title normally represents the main subject of the card.
Use the card-text class for descriptive content.
<p class="card-text">
Learn Bootstrap and create
responsive websites quickly.
</p>
Use card-img-top to place an image at the top of a card.
<img
src="bootstrap-course.jpg"
class="card-img-top"
alt="Bootstrap course">The image appears before the card body.
Use a Bootstrap badge to display the course level.
<span
class="badge
text-bg-primary
mb-3">
Beginner
</span>Other useful course labels might include Intermediate, Advanced, Popular, New, or Bestseller.
Add additional information inside the card body.
<p class="card-text">
<strong>
Duration:
</strong>
6 Months
</p>You can similarly display class mode, level, lessons, or other course information.
Use a list to display the important features of a course.
<ul class="list-unstyled">
<li>
✓ Practical Classes
</li>
<li>
✓ Assignments
</li>
<li>
✓ Projects
</li>
<li>
✓ Certificate
</li>
</ul>
The list-unstyled class removes the default list markers.
Display the course fee prominently.
<h4 class="text-success">
₹15,000
</h4>
<p class="text-body-secondary">
Complete course fee
</p>Bootstrap text utilities help create visual hierarchy.
Add a button to allow users to view the course.
<a
href="#"
class="btn btn-primary">
View Course
</a>Buttons can be used for course details, admission, registration, or other actions.
A course card can contain more than one action.
<div class="d-flex gap-2">
<a
href="#"
class="btn btn-primary">
View Course
</a>
<a
href="#"
class="btn btn-success">
Enroll Now
</a>
</div>
The gap-2 utility adds spacing between the buttons.
Use h-100 so cards fill the available height of their
grid columns.
<div class="card h-100">
...
</div>This is useful when different cards contain different amounts of content.
Flexbox can help keep action buttons near the bottom of equal-height cards.
<div
class="card-body
d-flex
flex-column">
<h3 class="card-title">
Bootstrap
</h3>
<p class="card-text">
Learn Bootstrap.
</p>
<a
href="#"
class="btn
btn-primary
mt-auto">
View Course
</a>
</div>
The mt-auto utility uses automatic top margin to push the
button toward the bottom of the flex column.
Use Bootstrap shadow utilities to add depth.
<div
class="card
h-100
shadow-sm">
...
</div>Available standard shadow utilities include:
shadow-smshadowshadow-lgshadow-noneBootstrap cards can include a separate header section.
<div class="card">
<div
class="card-header
text-bg-primary">
Popular Course
</div>
<div class="card-body">
Course Information
</div>
</div>A card header is useful for labels or categories.
A card can also contain a footer.
<div class="card">
<div class="card-body">
Course Information
</div>
<div
class="card-footer
text-body-secondary">
Last updated today
</div>
</div>The footer can contain update information, additional links, or other secondary details.
Now combine the individual card elements.
<div
class="card
h-100
shadow-sm">
<img
src="bootstrap-course.jpg"
class="card-img-top"
alt="Bootstrap course">
<div
class="card-body
d-flex
flex-column">
<span
class="badge
text-bg-primary
align-self-start
mb-3">
Beginner
</span>
<h3 class="card-title">
Bootstrap
</h3>
<p class="card-text">
Learn Bootstrap and
create responsive websites.
</p>
<p>
<strong>
Duration:
</strong>
6 Months
</p>
<ul class="list-unstyled">
<li>
✓ Practical Classes
</li>
<li>
✓ Projects
</li>
<li>
✓ Certificate
</li>
</ul>
<h4 class="text-success">
₹15,000
</h4>
<a
href="#"
class="btn
btn-primary
mt-auto">
View Course
</a>
</div>
</div>Place multiple cards inside responsive grid columns.
<div class="row g-4">
<div
class="col-12
col-md-6
col-lg-4">
HTML Card
</div>
<div
class="col-12
col-md-6
col-lg-4">
CSS Card
</div>
<div
class="col-12
col-md-6
col-lg-4">
Bootstrap Card
</div>
</div>Bootstrap automatically places the columns according to the available screen width.
The buttons can stack on smaller screens and appear next to each other on larger screens.
<div
class="d-grid
d-sm-flex
gap-2
mt-auto">
<a
href="#"
class="btn btn-primary">
View Course
</a>
<a
href="#"
class="btn btn-success">
Enroll Now
</a>
</div>
The d-grid class creates a grid display by default, while
d-sm-flex changes it to Flexbox from the small breakpoint.
Bootstrap contextual utilities can be combined with cards.
<div
class="card
text-bg-primary">
<div class="card-body">
Primary Card
</div>
</div>Another example:
<div
class="card
border-success">
<div class="card-body">
Success Border Card
</div>
</div>Contextual styling should not be the only method used to communicate important information.
The complete responsive course-grid structure can look like this:
<section class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h1>
Our Courses
</h1>
</div>
<div class="row g-4">
<div
class="col-12
col-md-6
col-lg-4">
Course Card 1
</div>
<div
class="col-12
col-md-6
col-lg-4">
Course Card 2
</div>
<div
class="col-12
col-md-6
col-lg-4">
Course Card 3
</div>
</div>
</div>
</section>Always test the card project at different viewport widths.
With this column configuration:
col-12 col-md-6 col-lg-4The expected layout is:
Here is the complete responsive Bootstrap Cards project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Our Courses
</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<section class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h1>
Our Popular Courses
</h1>
<p class="lead">
Choose your course
and start learning today.
</p>
</div>
<div class="row g-4">
<!-- HTML Course -->
<div
class="col-12
col-md-6
col-lg-4">
<div
class="card
h-100
shadow-sm">
<img
src="html-course.jpg"
class="card-img-top"
alt="HTML course">
<div
class="card-body
d-flex
flex-column">
<span
class="badge
text-bg-primary
align-self-start
mb-3">
Beginner
</span>
<h3
class="card-title">
HTML
</h3>
<p
class="card-text">
Learn HTML and
create the structure
of modern websites.
</p>
<p>
<strong>
Duration:
</strong>
2 Months
</p>
<ul
class="list-unstyled">
<li>
✓ Practical Classes
</li>
<li>
✓ Assignments
</li>
<li>
✓ Projects
</li>
<li>
✓ Certificate
</li>
</ul>
<h4
class="text-success">
₹5,000
</h4>
<div
class="d-grid
d-sm-flex
gap-2
mt-auto">
<a
href="#"
class="btn
btn-primary">
View Course
</a>
<a
href="#"
class="btn
btn-success">
Enroll Now
</a>
</div>
</div>
</div>
</div>
<!-- CSS Course -->
<div
class="col-12
col-md-6
col-lg-4">
<div
class="card
h-100
shadow-sm">
<img
src="css-course.jpg"
class="card-img-top"
alt="CSS course">
<div
class="card-body
d-flex
flex-column">
<span
class="badge
text-bg-success
align-self-start
mb-3">
Intermediate
</span>
<h3
class="card-title">
CSS
</h3>
<p
class="card-text">
Learn CSS and
design beautiful,
responsive web pages.
</p>
<p>
<strong>
Duration:
</strong>
2 Months
</p>
<ul
class="list-unstyled">
<li>
✓ Responsive Design
</li>
<li>
✓ Flexbox
</li>
<li>
✓ Grid
</li>
<li>
✓ Projects
</li>
</ul>
<h4
class="text-success">
₹5,000
</h4>
<div
class="d-grid
d-sm-flex
gap-2
mt-auto">
<a
href="#"
class="btn
btn-primary">
View Course
</a>
<a
href="#"
class="btn
btn-success">
Enroll Now
</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap Course -->
<div
class="col-12
col-md-6
col-lg-4">
<div
class="card
h-100
shadow-sm">
<img
src="bootstrap-course.jpg"
class="card-img-top"
alt="Bootstrap course">
<div
class="card-body
d-flex
flex-column">
<span
class="badge
text-bg-danger
align-self-start
mb-3">
Popular
</span>
<h3
class="card-title">
Bootstrap
</h3>
<p
class="card-text">
Learn Bootstrap
and build responsive
websites quickly.
</p>
<p>
<strong>
Duration:
</strong>
2 Months
</p>
<ul
class="list-unstyled">
<li>
✓ Bootstrap Grid
</li>
<li>
✓ Components
</li>
<li>
✓ Utilities
</li>
<li>
✓ Projects
</li>
</ul>
<h4
class="text-success">
₹5,000
</h4>
<div
class="d-grid
d-sm-flex
gap-2
mt-auto">
<a
href="#"
class="btn
btn-primary">
View Course
</a>
<a
href="#"
class="btn
btn-success">
Enroll Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>After completing this project, you will have a responsive course-card section suitable for an educational or training website.
card as the main Bootstrap card container.
card-body for the main card content.
card-title for the card heading.
card-text for descriptive content.
card-img-top for an image at the top of the card.
card-header to create a card header.
card-footer to create a card footer.
badge with contextual utilities for labels.
h-100 to help cards fill the available column height.
shadow-sm, shadow, or
shadow-lg for Bootstrap shadows.
d-flex flex-column to create a vertical Flexbox card
body.
mt-auto to push action content toward the bottom of a
flex column.
row g-4 to create a grid with spacing.
col-12 col-md-6 col-lg-4 for a common responsive
three-level card layout.
Question: Which Bootstrap class is used to place an image at the top of a card?