In this practical project, we will create a responsive landing page using Bootstrap. You will learn how to combine Bootstrap navigation, containers, grid system, typography, buttons, cards, badges, spacing, Flexbox, and responsive utilities to build a complete landing page.
A landing page is a webpage designed to introduce a product, service, business, course, or application to visitors.
Our landing page will contain:
Start with the 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 Landing Page
</title>
</head>
<body>
Landing Page Content
</body>
</html>
Add the Bootstrap stylesheet inside the head section.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
This provides Bootstrap's grid, navbar, buttons, cards, spacing, typography, and responsive utilities.
Use Bootstrap's responsive navbar component.
<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark">
<div class="container">
<a
class="navbar-brand"
href="#">
MyBrand
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNav"
aria-controls="mainNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
</div>
</nav>
Add links to important landing page sections.
<ul
class="navbar-nav
ms-auto">
<li class="nav-item">
<a
class="nav-link active"
href="#home">
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#features">
Features
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#pricing">
Pricing
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#contact">
Contact
</a>
</li>
</ul>
The ms-auto utility pushes the navigation links toward
the end of the flex container.
The hero section is usually the first major section visitors see.
<section
id="home"
class="py-5">
<div class="container">
<div
class="row
align-items-center
g-5">
<div
class="col-12
col-lg-6">
Hero Content
</div>
<div
class="col-12
col-lg-6">
Hero Image
</div>
</div>
</div>
</section>
Use Bootstrap typography classes to create a strong hero heading.
<h1
class="display-4
fw-bold">
Build Something
Amazing
</h1>
<p
class="lead
text-body-secondary">
Create modern and
responsive websites
with Bootstrap.
</p>
The display-4 class creates large display text and
fw-bold makes the heading bold.
Add call-to-action buttons below the hero description.
<div
class="d-flex
flex-wrap
gap-2
mt-4">
<a
href="#"
class="btn
btn-primary
btn-lg">
Get Started
</a>
<a
href="#features"
class="btn
btn-outline-secondary
btn-lg">
Learn More
</a>
</div>
The flex-wrap utility allows buttons to wrap when space is
limited.
A responsive image can be created using Bootstrap's
img-fluid class.
<img
src="hero.jpg"
class="img-fluid
rounded"
alt="Website illustration">
The img-fluid class makes the image responsive within its
parent container.
Create a section for important product or service features.
<section
id="features"
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Our Features
</h2>
<p
class="text-body-secondary">
Everything you need
to get started.
</p>
</div>
</div>
</section>
Use Bootstrap cards to display individual features.
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<h4
class="card-title">
Fast
</h4>
<p
class="card-text">
Build pages quickly
using Bootstrap.
</p>
</div>
</div>
</div>
The h-100 class helps cards fill the available column
height.
Use the Bootstrap 12-column grid to create three feature cards.
<div class="row g-4">
<div
class="col-12
col-md-4">
Feature One
</div>
<div
class="col-12
col-md-4">
Feature Two
</div>
<div
class="col-12
col-md-4">
Feature Three
</div>
</div>
Each col-md-4 occupies four of the twelve grid columns
from the medium breakpoint and above.
A services section can introduce the main services offered by a business.
<section
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Our Services
</h2>
<p
class="text-body-secondary">
Explore what we offer.
</p>
</div>
</div>
</section>
Service cards can contain a title, description, and action link.
<div
class="card
h-100">
<div
class="card-body">
<h4
class="card-title">
Web Development
</h4>
<p
class="card-text">
Build responsive
websites for your
business.
</p>
<a
href="#"
class="btn
btn-outline-primary">
Learn More
</a>
</div>
</div>
An about section provides visitors with more information about the business, product, or service.
<section
class="py-5
bg-light">
<div class="container">
<div
class="row
align-items-center
g-5">
<div
class="col-12
col-lg-6">
<h2>
About Our Company
</h2>
<p>
We create modern
digital solutions
for businesses.
</p>
</div>
<div
class="col-12
col-lg-6">
About Image
</div>
</div>
</div>
</section>
Statistics can highlight important business achievements.
<div class="row g-4 text-center">
<div class="col-6 col-md-3">
<h2>
500+
</h2>
<p
class="text-body-secondary">
Customers
</p>
</div>
<div class="col-6 col-md-3">
<h2>
100+
</h2>
<p
class="text-body-secondary">
Projects
</p>
</div>
<div class="col-6 col-md-3">
<h2>
50+
</h2>
<p
class="text-body-secondary">
Courses
</p>
</div>
<div class="col-6 col-md-3">
<h2>
10+
</h2>
<p
class="text-body-secondary">
Years
</p>
</div>
</div>
A pricing section can display different plans.
<section
id="pricing"
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Pricing Plans
</h2>
<p
class="text-body-secondary">
Choose the plan
that fits your needs.
</p>
</div>
</div>
</section>
Use a Bootstrap card to display a pricing plan.
<div
class="card
h-100">
<div
class="card-body
text-center">
<h4
class="card-title">
Basic
</h4>
<h2>
₹999
</h2>
<p
class="text-body-secondary">
Per month
</p>
<a
href="#"
class="btn
btn-primary">
Choose Plan
</a>
</div>
</div>
A list group can be used to display features included in a pricing plan.
<ul
class="list-group
list-group-flush
mb-4">
<li
class="list-group-item">
5 Projects
</li>
<li
class="list-group-item">
Basic Support
</li>
<li
class="list-group-item">
10 GB Storage
</li>
</ul>
Create three responsive pricing cards.
<div class="row g-4">
<div
class="col-12
col-md-4">
Basic Plan
</div>
<div
class="col-12
col-md-4">
Standard Plan
</div>
<div
class="col-12
col-md-4">
Premium Plan
</div>
</div>
On smaller screens, the cards stack vertically. From the medium breakpoint, they can appear in three columns.
Testimonials can display feedback from customers or users.
<section
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
What Our Customers Say
</h2>
</div>
Testimonials
</div>
</section>
Use a card to display customer feedback.
<div
class="card
h-100">
<div
class="card-body">
<p
class="card-text">
"The service was
excellent and the
team was very helpful."
</p>
<h6
class="card-subtitle
text-body-secondary">
Rahul Kumar
</h6>
</div>
</div>
A call-to-action section encourages visitors to take the next step.
<section
class="py-5">
<div class="container">
<div
class="text-center">
<h2>
Ready to Get Started?
</h2>
<p
class="text-body-secondary">
Start building your
project today.
</p>
<a
href="#"
class="btn
btn-primary
btn-lg">
Get Started
</a>
</div>
</div>
</section>
A footer can contain copyright information and useful links.
<footer
class="bg-dark
text-white
py-4">
<div
class="container">
<div
class="row
g-4">
<div
class="col-12
col-md-6">
<h5>
MyBrand
</h5>
<p
class="text-white-50">
Building better
digital experiences.
</p>
</div>
<div
class="col-12
col-md-6">
Footer Links
</div>
</div>
</div>
</footer>
Use Bootstrap navigation utilities for footer links.
<div
class="d-flex
flex-wrap
gap-3">
<a
href="#"
class="text-white
text-decoration-none">
Privacy
</a>
<a
href="#"
class="text-white
text-decoration-none">
Terms
</a>
<a
href="#"
class="text-white
text-decoration-none">
Contact
</a>
</div>
A landing page can be organized into the following sections:
Navbar
↓
Hero Section
↓
Features
↓
Services
↓
About
↓
Statistics
↓
Pricing
↓
Testimonials
↓
Call to Action
↓
Footer
Using separate sections makes the page easier to navigate and maintain.
Bootstrap responsive classes allow the landing page to adapt to different screen sizes.
container provides responsive page width.col-12 creates full-width mobile content.col-md-4 creates three columns from the medium
breakpoint.col-lg-6 creates two columns from the large breakpoint.py-5 provides consistent section spacing.g-4 provides grid spacing.d-flex enables Flexbox layouts.flex-wrap allows items to wrap when necessary.The responsive navbar uses Bootstrap's JavaScript collapse component, so include the Bootstrap bundle before the closing body tag.
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
The bundle includes the JavaScript needed for Bootstrap components such as the responsive navbar collapse.
Here is a complete responsive Bootstrap landing page project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Landing Page
</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark
sticky-top">
<div class="container">
<a
class="navbar-brand fw-bold"
href="#home">
MyBrand
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNav"
aria-controls="mainNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse
navbar-collapse"
id="mainNav">
<ul
class="navbar-nav
ms-auto">
<li class="nav-item">
<a
class="nav-link active"
href="#home">
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#features">
Features
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#services">
Services
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#pricing">
Pricing
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#contact">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<section
id="home"
class="py-5">
<div class="container">
<div
class="row
align-items-center
g-5
py-4">
<div
class="col-12
col-lg-6">
<span
class="badge
text-bg-primary
mb-3">
Bootstrap Project
</span>
<h1
class="display-4
fw-bold">
Build Something Amazing
</h1>
<p
class="lead
text-body-secondary">
Create modern,
responsive, and
mobile-friendly
websites using
Bootstrap.
</p>
<div
class="d-flex
flex-wrap
gap-2
mt-4">
<a
href="#pricing"
class="btn
btn-primary
btn-lg">
Get Started
</a>
<a
href="#features"
class="btn
btn-outline-secondary
btn-lg">
Learn More
</a>
</div>
</div>
<div
class="col-12
col-lg-6">
<div
class="card
border-0
shadow-sm
h-100">
<div
class="card-body
p-5
text-center">
<h2>
Responsive Design
</h2>
<p
class="text-body-secondary">
One layout that works
across phones,
tablets, and
desktops.
</p>
<div
class="display-1">
🚀
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section
id="features"
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Our Features
</h2>
<p
class="text-body-secondary">
Everything you need
to build a modern
website.
</p>
</div>
<div class="row g-4">
<div
class="col-12
col-md-4">
<div
class="card
h-100
border-0
shadow-sm">
<div
class="card-body
text-center
p-4">
<div
class="display-6
mb-3">
⚡
</div>
<h4
class="card-title">
Fast
</h4>
<p
class="card-text
text-body-secondary">
Build responsive
pages quickly with
Bootstrap utilities.
</p>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100
border-0
shadow-sm">
<div
class="card-body
text-center
p-4">
<div
class="display-6
mb-3">
📱
</div>
<h4
class="card-title">
Responsive
</h4>
<p
class="card-text
text-body-secondary">
Create layouts that
adapt to different
screen sizes.
</p>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100
border-0
shadow-sm">
<div
class="card-body
text-center
p-4">
<div
class="display-6
mb-3">
🎨
</div>
<h4
class="card-title">
Flexible
</h4>
<p
class="card-text
text-body-secondary">
Combine utilities
and components to
build custom layouts.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section
id="services"
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Our Services
</h2>
<p
class="text-body-secondary">
Solutions for your
digital needs.
</p>
</div>
<div class="row g-4">
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<h4
class="card-title">
Web Development
</h4>
<p
class="card-text">
Build modern
responsive websites
for businesses.
</p>
<a
href="#"
class="btn
btn-outline-primary">
Learn More
</a>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<h4
class="card-title">
UI Design
</h4>
<p
class="card-text">
Create clean and
user-friendly
interfaces.
</p>
<a
href="#"
class="btn
btn-outline-primary">
Learn More
</a>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<h4
class="card-title">
Support
</h4>
<p
class="card-text">
Get help with
your digital
projects.
</p>
<a
href="#"
class="btn
btn-outline-primary">
Learn More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About and Statistics -->
<section
class="py-5
bg-light">
<div class="container">
<div
class="row
align-items-center
g-5">
<div
class="col-12
col-lg-6">
<h2>
About Our Company
</h2>
<p>
We help businesses
create modern digital
experiences using
reliable technologies
and responsive design.
</p>
<p
class="text-body-secondary">
Our goal is to make
digital solutions
simple, useful, and
accessible.
</p>
<a
href="#"
class="btn
btn-primary">
Learn About Us
</a>
</div>
<div
class="col-12
col-lg-6">
<div
class="row
g-4
text-center">
<div
class="col-6">
<div
class="card
border-0
h-100">
<div
class="card-body">
<h2>
500+
</h2>
<p
class="text-body-secondary
mb-0">
Customers
</p>
</div>
</div>
</div>
<div
class="col-6">
<div
class="card
border-0
h-100">
<div
class="card-body">
<h2>
100+
</h2>
<p
class="text-body-secondary
mb-0">
Projects
</p>
</div>
</div>
</div>
<div
class="col-6">
<div
class="card
border-0
h-100">
<div
class="card-body">
<h2>
50+
</h2>
<p
class="text-body-secondary
mb-0">
Courses
</p>
</div>
</div>
</div>
<div
class="col-6">
<div
class="card
border-0
h-100">
<div
class="card-body">
<h2>
10+
</h2>
<p
class="text-body-secondary
mb-0">
Years
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section
id="pricing"
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Pricing Plans
</h2>
<p
class="text-body-secondary">
Choose a plan that
fits your needs.
</p>
</div>
<div class="row g-4">
<div
class="col-12
col-md-4">
<div
class="card
h-100
text-center">
<div
class="card-body
p-4">
<h4>
Basic
</h4>
<h2>
₹999
</h2>
<p
class="text-body-secondary">
Per month
</p>
<ul
class="list-group
list-group-flush
mb-4">
<li
class="list-group-item">
5 Projects
</li>
<li
class="list-group-item">
Basic Support
</li>
<li
class="list-group-item">
10 GB Storage
</li>
</ul>
<a
href="#"
class="btn
btn-outline-primary
w-100">
Choose Plan
</a>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100
border-primary
text-center">
<div
class="card-header
bg-primary
text-white">
Popular
</div>
<div
class="card-body
p-4">
<h4>
Standard
</h4>
<h2>
₹1,999
</h2>
<p
class="text-body-secondary">
Per month
</p>
<ul
class="list-group
list-group-flush
mb-4">
<li
class="list-group-item">
20 Projects
</li>
<li
class="list-group-item">
Priority Support
</li>
<li
class="list-group-item">
50 GB Storage
</li>
</ul>
<a
href="#"
class="btn
btn-primary
w-100">
Choose Plan
</a>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100
text-center">
<div
class="card-body
p-4">
<h4>
Premium
</h4>
<h2>
₹3,999
</h2>
<p
class="text-body-secondary">
Per month
</p>
<ul
class="list-group
list-group-flush
mb-4">
<li
class="list-group-item">
Unlimited Projects
</li>
<li
class="list-group-item">
Premium Support
</li>
<li
class="list-group-item">
100 GB Storage
</li>
</ul>
<a
href="#"
class="btn
btn-outline-primary
w-100">
Choose Plan
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
What Our Customers Say
</h2>
</div>
<div class="row g-4">
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<p
class="card-text">
"The team delivered
exactly what we needed.
The experience was
excellent."
</p>
<h6
class="card-subtitle
text-body-secondary">
Rahul Kumar
</h6>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<p
class="card-text">
"The responsive design
made our website easy to
use on every device."
</p>
<h6
class="card-subtitle
text-body-secondary">
Priya Singh
</h6>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<p
class="card-text">
"The project was simple
to understand and easy
to customize."
</p>
<h6
class="card-subtitle
text-body-secondary">
Amit Kumar
</h6>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section
class="py-5">
<div class="container">
<div
class="text-center">
<h2>
Ready to Get Started?
</h2>
<p
class="lead
text-body-secondary">
Start building your
next project today.
</p>
<a
href="#"
class="btn
btn-primary
btn-lg">
Get Started
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer
id="contact"
class="bg-dark
text-white
py-5">
<div class="container">
<div
class="row
g-4">
<div
class="col-12
col-md-6">
<h5>
MyBrand
</h5>
<p
class="text-white-50">
Building better
digital experiences.
</p>
</div>
<div
class="col-12
col-md-6">
<h5>
Quick Links
</h5>
<div
class="d-flex
flex-wrap
gap-3">
<a
href="#home"
class="text-white
text-decoration-none">
Home
</a>
<a
href="#features"
class="text-white
text-decoration-none">
Features
</a>
<a
href="#pricing"
class="text-white
text-decoration-none">
Pricing
</a>
</div>
</div>
</div>
<hr
class="my-4">
<div
class="text-center
text-white-50">
<p class="mb-0">
© 2026 MyBrand.
All rights reserved.
</p>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
After completing this project, you will have a complete responsive Bootstrap landing page containing the major sections commonly found on business and product websites.
navbar and navbar-expand-lg to create a
responsive navigation bar.
container to provide responsive horizontal spacing.
row and responsive column classes to organize page
sections.
display-4 and lead for prominent landing
page typography.
btn classes to create call-to-action buttons.
card and card-body for feature, service,
pricing, and testimonial sections.
h-100 when cards in the same row should fill the
available column height.
img-fluid to make images responsive.
py-5 to create consistent vertical section spacing.
g-4 for spacing between grid items.
d-flex and flex-wrap to create flexible
button and link layouts.
#home,
#features, and #pricing for navigation.
table-responsive when a table needs horizontal
scrolling on smaller screens.
Question: Which Bootstrap class is used to make a responsive navigation bar expand at the large breakpoint?