In this practical project, we will build a responsive course website section using the Bootstrap Grid System. You will learn how to combine containers, rows, columns, cards, spacing utilities, responsive breakpoints, buttons, and Flexbox.
Our project will contain a simple course listing section. Each course will be displayed inside a Bootstrap card.
The project will demonstrate:
Start with a basic 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 Grid Project
</title>
</head>
<body>
Content goes here.
</body>
</html>The viewport meta tag is important for responsive layouts.
Include Bootstrap CSS inside the <head> section.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">This allows us to use Bootstrap's grid system and utility classes.
The Bootstrap container class provides a responsive
fixed-width container.
<div class="container">
Project Content
</div>The container keeps the content organized and provides responsive horizontal spacing.
Inside the container, create a Bootstrap row.
<div class="container">
<div class="row">
Content
</div>
</div>
The row acts as the main horizontal structure for the
columns.
Create a column using Bootstrap's grid class.
<div class="col-md-6">
First Column
</div>
col-md-6 means the column takes 6 of the 12 grid columns
from the medium breakpoint and above.
Add another column.
<div class="row">
<div class="col-md-6">
Column One
</div>
<div class="col-md-6">
Column Two
</div>
</div>The two columns occupy half of the row each from the medium breakpoint and above.
For a three-column layout on large screens, use
col-lg-4.
<div class="row">
<div class="col-lg-4">
Column One
</div>
<div class="col-lg-4">
Column Two
</div>
<div class="col-lg-4">
Column Three
</div>
</div>Each column takes 4 of the 12 grid columns, resulting in three equal columns.
Use col-12 as the default and add larger breakpoint
classes.
<div
class="col-12
col-md-6
col-lg-4">
Course Card
</div>This means:
Use the g-4 class to add a gap between grid items.
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
Course
</div>
<div class="col-12 col-md-6 col-lg-4">
Course
</div>
</div>
The g-4 utility applies spacing between the grid columns
and rows.
Now create the first course card.
<div class="card">
<div class="card-body">
<h3 class="card-title">
HTML
</h3>
<p class="card-text">
Learn HTML from beginner level.
</p>
<button class="btn btn-primary">
Start Course
</button>
</div>
</div>Use a Bootstrap badge to display the course level.
<span
class="badge
bg-primary
rounded-pill">
Beginner
</span>Badges are useful for labels such as Beginner, Intermediate, Advanced, New, or Popular.
Add course information inside the card.
<p>
<i class="bi bi-clock"></i>
Duration: 2 Months
</p>You can also use plain text if Bootstrap Icons are not included.
One advantage of Bootstrap is that many layouts can be created without writing custom CSS.
<div class="container py-5">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
Course Content
</div>
</div>
</div>
</div>
</div>
The h-100 utility can make cards fill the available height
of their grid columns.
<div
class="card h-100">
<div class="card-body">
Course Content
</div>
</div>This is useful when cards in the same row contain different amounts of text.
Create multiple course cards inside the same row.
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h3>HTML</h3>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h3>CSS</h3>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<h3>JavaScript</h3>
</div>
</div>
</div>
</div>Add a heading before the course grid.
<div class="text-center mb-5">
<h1>
Our Courses
</h1>
<p>
Learn practical skills step by step.
</p>
</div>
The text-center class centers the heading, while
mb-5 adds bottom margin.
Add a button to each course card.
<button
class="btn btn-primary
w-100">
Start Course
</button>
The w-100 class makes the button fill the available
width of the card body.
A course card can also display its price.
<h4 class="text-success">
₹5,000
</h4>
<p class="text-body-secondary">
One-time fee
</p>Bootstrap text utilities can be used to visually organize the price and supporting information.
Use a list to display course features.
<ul class="list-unstyled">
<li>
✓ Practical Projects
</li>
<li>
✓ Assignments
</li>
<li>
✓ Certificate
</li>
</ul>
The list-unstyled class removes the default list styling.
Bootstrap automatically moves columns to the next row when there is not enough horizontal space.
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
HTML
</div>
<div class="col-12 col-md-6 col-lg-4">
CSS
</div>
<div class="col-12 col-md-6 col-lg-4">
JavaScript
</div>
<div class="col-12 col-md-6 col-lg-4">
Bootstrap
</div>
<div class="col-12 col-md-6 col-lg-4">
React
</div>
<div class="col-12 col-md-6 col-lg-4">
Python
</div>
</div>Create a responsive header using Flexbox utilities.
<header
class="py-4
border-bottom
mb-5">
<div
class="d-flex
flex-column
flex-md-row
justify-content-between
align-items-center
gap-3">
<h2 class="mb-0">
Soopro Pathshala
</h2>
<button
class="btn btn-primary">
Join Now
</button>
</div>
</header>The heading can be centered on small screens and aligned to the start on larger screens.
<div
class="text-center
text-md-start">
<h1>
Our Courses
</h1>
</div>This is another example of Bootstrap's mobile-first responsive utilities.
At this point, our main grid structure looks like this:
<div class="container py-5">
<div
class="text-center mb-5">
<h1>
Our Courses
</h1>
<p>
Learn practical skills.
</p>
</div>
<div class="row g-4">
<div
class="col-12
col-md-6
col-lg-4">
Course Card
</div>
<div
class="col-12
col-md-6
col-lg-4">
Course Card
</div>
<div
class="col-12
col-md-6
col-lg-4">
Course Card
</div>
</div>
</div>On a small screen, each course column uses the full width.
col-12Therefore, the cards appear one below another.
At the medium breakpoint, each card uses 6 columns.
col-md-6Since the Bootstrap grid contains 12 columns, two cards can fit in one row.
6 + 6 = 12At the large breakpoint, each card uses 4 columns.
col-lg-4Three cards can therefore fit in one row.
4 + 4 + 4 = 12Here is a complete course card that we can use in our project.
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<span
class="badge
bg-primary
rounded-pill
align-self-start
mb-3">
Beginner
</span>
<h3 class="card-title">
HTML
</h3>
<p class="card-text">
Learn HTML from
beginner to practical
level.
</p>
<h4 class="text-success">
₹5,000
</h4>
<ul class="list-unstyled">
<li>
✓ Practical Projects
</li>
<li>
✓ Assignments
</li>
<li>
✓ Certificate
</li>
</ul>
<button
class="btn btn-primary
w-100 mt-auto">
Start Course
</button>
</div>
</div>Now combine everything into one responsive Bootstrap Grid project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Course Project
</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<header
class="py-4 border-bottom">
<div
class="container">
<div
class="d-flex
flex-column
flex-md-row
justify-content-between
align-items-center
gap-3">
<h2 class="mb-0">
Soopro Pathshala
</h2>
<button
class="btn btn-primary">
Join Now
</button>
</div>
</div>
</header>
<main class="py-5">
<div class="container">
<div
class="text-center mb-5">
<h1>
Our Courses
</h1>
<p>
Learn practical
skills step by step.
</p>
</div>
<div class="row g-4">
<div
class="col-12
col-md-6
col-lg-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-body
d-flex
flex-column">
<span
class="badge
bg-primary
rounded-pill
align-self-start
mb-3">
Beginner
</span>
<h3>
HTML
</h3>
<p>
Learn HTML
from beginner
to practical
level.
</p>
<h4
class="text-success">
₹5,000
</h4>
<ul
class="list-unstyled">
<li>
✓ Projects
</li>
<li>
✓ Assignments
</li>
<li>
✓ Certificate
</li>
</ul>
<button
class="btn
btn-primary
w-100
mt-auto">
Start Course
</button>
</div>
</div>
</div>
<div
class="col-12
col-md-6
col-lg-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-body
d-flex
flex-column">
<span
class="badge
bg-success
rounded-pill
align-self-start
mb-3">
Intermediate
</span>
<h3>
CSS
</h3>
<p>
Learn CSS
and create
beautiful
web pages.
</p>
<h4
class="text-success">
₹5,000
</h4>
<ul
class="list-unstyled">
<li>
✓ Projects
</li>
<li>
✓ Assignments
</li>
<li>
✓ Certificate
</li>
</ul>
<button
class="btn
btn-success
w-100
mt-auto">
Start Course
</button>
</div>
</div>
</div>
<div
class="col-12
col-md-6
col-lg-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-body
d-flex
flex-column">
<span
class="badge
bg-info
rounded-pill
align-self-start
mb-3">
Advanced
</span>
<h3>
Bootstrap
</h3>
<p>
Build responsive
websites with
Bootstrap.
</p>
<h4
class="text-success">
₹5,000
</h4>
<ul
class="list-unstyled">
<li>
✓ Projects
</li>
<li>
✓ Assignments
</li>
<li>
✓ Certificate
</li>
</ul>
<button
class="btn
btn-info
w-100
mt-auto">
Start Course
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>After completing the project, the page will have a responsive course layout.
h-100.g-4.container provides a responsive content container.row creates the grid row.col-12 creates a full-width column by default.col-md-6 creates a half-width column from the medium
breakpoint.col-lg-4 creates a one-third-width column from the
large breakpoint.g-4 adds spacing between grid items.h-100 can help cards fill the available height.4 + 4 + 4 = 12.6 + 6 = 12.col-12 col-md-6 col-lg-4 creates a common
responsive card layout.Question: In Bootstrap's 12-column grid, which class creates a column that occupies 4 columns from the large breakpoint and above?