In this practical project, we will combine the Bootstrap concepts learned throughout this tutorial to create a complete responsive business website. The project will include a responsive navbar, hero section, services, about section, statistics, portfolio, testimonials, pricing, contact form, call-to-action section, and footer.
A complete website combines multiple sections into one consistent interface. Bootstrap helps us create these sections quickly while keeping the website responsive.
Our website will contain:
Begin with a standard HTML5 document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Complete Bootstrap Website
</title>
</head>
<body>
Website Content
</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">
This gives the website access to Bootstrap's layout system, components, utilities, and responsive classes.
The navbar provides navigation between the major sections of the website.
<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark
sticky-top">
<div class="container">
<a
class="navbar-brand fw-bold"
href="#home">
MyCompany
</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 the important sections of the website.
<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="#about">
About
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#services">
Services
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#portfolio">
Portfolio
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#contact">
Contact
</a>
</li>
</ul>
The hero section introduces the website and provides a clear call to action.
<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">
Welcome
</span>
<h1
class="display-4
fw-bold">
Build Your Digital Future
</h1>
<p
class="lead
text-body-secondary">
We create modern,
responsive, and
reliable digital
solutions.
</p>
</div>
<div
class="col-12
col-lg-6">
Hero Content
</div>
</div>
</div>
</section>
Use Bootstrap buttons to encourage visitors to explore the website.
<div
class="d-flex
flex-wrap
gap-2
mt-4">
<a
href="#services"
class="btn
btn-primary
btn-lg">
Our Services
</a>
<a
href="#contact"
class="btn
btn-outline-secondary
btn-lg">
Contact Us
</a>
</div>
Use img-fluid to make an image responsive.
<img
src="hero.jpg"
class="img-fluid
rounded"
alt="Business team
working together">
The image automatically adapts to the width of its parent container.
The features section highlights important benefits of the website, product, or service.
<section
id="features"
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Why Choose Us?
</h2>
<p
class="text-body-secondary">
We provide simple,
reliable, and effective
solutions.
</p>
</div>
</div>
</section>
Use Bootstrap cards to display individual features.
<div
class="col-12
col-md-4">
<div
class="card
h-100
border-0
shadow-sm">
<div
class="card-body
text-center">
<h4
class="card-title">
Quality
</h4>
<p
class="card-text
text-body-secondary">
We focus on quality
and reliable solutions.
</p>
</div>
</div>
</div>
The services section explains what the business offers.
<section
id="services"
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Our Services
</h2>
</div>
<div class="row g-4">
Service Cards
</div>
</div>
</section>
Create cards for different services.
<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">
Responsive websites
for businesses and
organizations.
</p>
<a
href="#contact"
class="btn
btn-outline-primary">
Get Started
</a>
</div>
</div>
</div>
The About section introduces the company and explains its purpose.
<section
id="about"
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
build modern digital
experiences.
</p>
</div>
<div
class="col-12
col-lg-6">
About Image
</div>
</div>
</div>
</section>
Place an image beside the About content.
<img
src="about.jpg"
class="img-fluid
rounded
shadow-sm"
alt="Our team">
The combination of img-fluid and rounded
provides a responsive image with rounded corners.
Statistics can highlight achievements and important business information.
<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>
Add additional statistics to complete the section.
<div
class="col-6
col-md-3">
<h2>
50+
</h2>
<p
class="text-body-secondary">
Courses
</p>
</div>
The portfolio section can display completed projects.
<section
id="portfolio"
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Our Projects
</h2>
<p
class="text-body-secondary">
Some of our recent work.
</p>
</div>
<div class="row g-4">
Portfolio Cards
</div>
</div>
</section>
Use Bootstrap cards to display project images and information.
<div
class="col-12
col-md-4">
<div
class="card
h-100
shadow-sm">
<img
src="project.jpg"
class="card-img-top"
alt="Project preview">
<div
class="card-body">
<h4
class="card-title">
Business Website
</h4>
<p
class="card-text">
A responsive business
website project.
</p>
<a
href="#"
class="btn
btn-primary">
View Project
</a>
</div>
</div>
</div>
Testimonials display feedback from customers or users.
<section
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Customer Reviews
</h2>
</div>
<div class="row g-4">
Testimonials
</div>
</div>
</section>
Create cards containing customer feedback.
<div
class="col-12
col-md-4">
<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>
</div>
A pricing section allows visitors to compare available plans.
<section
id="pricing"
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Pricing Plans
</h2>
</div>
<div class="row g-4">
Pricing Cards
</div>
</div>
</section>
Create Basic, Standard, and Premium plans.
<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>
<a
href="#contact"
class="btn
btn-primary">
Choose Plan
</a>
</div>
</div>
</div>
The contact section allows visitors to send their information.
<section
id="contact"
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Contact Us
</h2>
<p
class="text-body-secondary">
Have a question?
Send us a message.
</p>
</div>
Contact Form
</div>
</section>
Use Bootstrap form controls to create the contact form.
<form>
<div class="mb-3">
<label
class="form-label"
for="name">
Name
</label>
<input
type="text"
class="form-control"
id="name"
placeholder="Enter your name">
</div>
<div class="mb-3">
<label
class="form-label"
for="email">
Email
</label>
<input
type="email"
class="form-control"
id="email"
placeholder="Enter your email">
</div>
<div class="mb-3">
<label
class="form-label"
for="message">
Message
</label>
<textarea
class="form-control"
id="message"
rows="5">
</textarea>
</div>
<button
type="submit"
class="btn
btn-primary">
Send Message
</button>
</form>
Display business contact information beside the form.
<div
class="card
h-100
border-0
shadow-sm">
<div
class="card-body
p-4">
<h4>
Get in Touch
</h4>
<p>
Email:
hello@example.com
</p>
<p>
Phone:
+91 98765 43210
</p>
<p>
Address:
Your City, India
</p>
</div>
</div>
The CTA section provides a final opportunity for visitors to take action.
<section
class="py-5">
<div class="container">
<div
class="text-center">
<h2>
Ready to Start Your Project?
</h2>
<p
class="lead
text-body-secondary">
Contact us today and
let's build something
amazing.
</p>
<a
href="#contact"
class="btn
btn-primary
btn-lg">
Contact Us
</a>
</div>
</div>
</section>
The footer contains company information, navigation links, and copyright information.
<footer
class="bg-dark
text-white
py-5">
<div class="container">
<div
class="row
g-4">
<div
class="col-12
col-md-6">
<h5>
MyCompany
</h5>
<p
class="text-white-50">
Creating better
digital experiences.
</p>
</div>
<div
class="col-12
col-md-6">
<h5>
Quick Links
</h5>
Footer Links
</div>
</div>
<hr>
<p
class="text-center
text-white-50
mb-0">
© 2026 MyCompany.
All rights reserved.
</p>
</div>
</footer>
Use Bootstrap's responsive grid and utility classes throughout the project.
container creates a responsive content area.row creates a Bootstrap grid row.col-12 provides full-width content on small screens.col-md-4 creates three columns from the medium
breakpoint.col-lg-6 creates two columns from the large breakpoint.g-4 adds spacing between grid items.py-5 adds vertical section spacing.flex-wrap allows buttons to wrap.img-fluid makes images responsive.table-responsive helps wide tables remain usable on
small screens.Below is a complete responsive Bootstrap business website combining the major sections from this project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
MyCompany - Bootstrap Website
</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">
MyCompany
</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="#about">
About
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#services">
Services
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#portfolio">
Portfolio
</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-5">
<div
class="col-12
col-lg-6">
<span
class="badge
text-bg-primary
mb-3">
Digital Solutions
</span>
<h1
class="display-4
fw-bold">
Build Your Digital Future
</h1>
<p
class="lead
text-body-secondary">
We create modern,
responsive, and
reliable websites
for businesses.
</p>
<div
class="d-flex
flex-wrap
gap-2
mt-4">
<a
href="#services"
class="btn
btn-primary
btn-lg">
Our Services
</a>
<a
href="#contact"
class="btn
btn-outline-secondary
btn-lg">
Contact Us
</a>
</div>
</div>
<div
class="col-12
col-lg-6">
<div
class="card
border-0
shadow-sm">
<div
class="card-body
p-5
text-center">
<div
class="display-1">
🚀
</div>
<h3>
Modern Web Solutions
</h3>
<p
class="text-body-secondary
mb-0">
Responsive design
for every device.
</p>
</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>
Why Choose Us?
</h2>
<p
class="text-body-secondary">
Quality solutions
for modern businesses.
</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>
Fast
</h4>
<p
class="text-body-secondary">
Fast and efficient
development solutions.
</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>
Responsive
</h4>
<p
class="text-body-secondary">
Websites that work
across all devices.
</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>
Reliable
</h4>
<p
class="text-body-secondary">
Reliable and maintainable
digital solutions.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section
id="about"
class="py-5">
<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
build professional
websites and digital
experiences.
</p>
<p
class="text-body-secondary">
Our focus is on
responsive design,
usability, and
maintainable solutions.
</p>
<a
href="#contact"
class="btn
btn-primary">
Work With Us
</a>
</div>
<div
class="col-12
col-lg-6">
<div
class="card
border-0
shadow-sm">
<div
class="card-body
p-5
text-center">
<div
class="display-1">
💻
</div>
<h4>
Digital Excellence
</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Statistics -->
<section
class="py-5
bg-light">
<div class="container">
<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>
</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 designed
for your business.
</p>
</div>
<div class="row g-4">
<div
class="col-12
col-md-4">
<div
class="card
h-100">
<div
class="card-body">
<h4>
Web Development
</h4>
<p>
Responsive websites
for businesses.
</p>
<a
href="#contact"
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>
UI Design
</h4>
<p>
Clean and
user-friendly
interfaces.
</p>
<a
href="#contact"
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>
Technical Support
</h4>
<p>
Reliable support
for your projects.
</p>
<a
href="#contact"
class="btn
btn-outline-primary">
Learn More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<section
id="portfolio"
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Our Projects
</h2>
<p
class="text-body-secondary">
Some examples of
our recent work.
</p>
</div>
<div class="row g-4">
<div
class="col-12
col-md-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-body">
<span
class="badge
text-bg-primary
mb-2">
Website
</span>
<h4>
Business Website
</h4>
<p>
A responsive website
for a growing business.
</p>
<a
href="#"
class="btn
btn-outline-primary">
View Project
</a>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-body">
<span
class="badge
text-bg-success
mb-2">
Education
</span>
<h4>
Learning Platform
</h4>
<p>
An online platform
for students.
</p>
<a
href="#"
class="btn
btn-outline-primary">
View Project
</a>
</div>
</div>
</div>
<div
class="col-12
col-md-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-body">
<span
class="badge
text-bg-warning
mb-2">
Application
</span>
<h4>
Management System
</h4>
<p>
A responsive system
for business management.
</p>
<a
href="#"
class="btn
btn-outline-primary">
View Project
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section
class="py-5">
<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 provided
an excellent website
for our business."
</p>
<h6
class="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
works perfectly on
mobile devices."
</p>
<h6
class="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 complete project
was easy to use and
maintain."
</p>
<h6
class="text-body-secondary">
Amit Kumar
</h6>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section
id="pricing"
class="py-5
bg-light">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Pricing Plans
</h2>
</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="#contact"
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="#contact"
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="#contact"
class="btn
btn-outline-primary
w-100">
Choose Plan
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section
id="contact"
class="py-5">
<div class="container">
<div
class="text-center
mb-5">
<h2>
Contact Us
</h2>
<p
class="text-body-secondary">
We would love to
hear from you.
</p>
</div>
<div
class="row
g-4">
<div
class="col-12
col-lg-5">
<div
class="card
h-100
border-0
shadow-sm">
<div
class="card-body
p-4">
<h4>
Get in Touch
</h4>
<p>
Email:
hello@example.com
</p>
<p>
Phone:
+91 98765 43210
</p>
<p>
Address:
Your City, India
</p>
</div>
</div>
</div>
<div
class="col-12
col-lg-7">
<form>
<div class="mb-3">
<label
class="form-label"
for="name">
Name
</label>
<input
type="text"
class="form-control"
id="name"
placeholder="Enter your name">
</div>
<div class="mb-3">
<label
class="form-label"
for="email">
Email
</label>
<input
type="email"
class="form-control"
id="email"
placeholder="Enter your email">
</div>
<div class="mb-3">
<label
class="form-label"
for="message">
Message
</label>
<textarea
class="form-control"
id="message"
rows="5"
placeholder="Enter your message">
</textarea>
</div>
<button
type="submit"
class="btn
btn-primary">
Send Message
</button>
</form>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section
class="py-5
bg-light">
<div class="container">
<div
class="text-center">
<h2>
Ready to Start?
</h2>
<p
class="lead
text-body-secondary">
Let's build your
next project together.
</p>
<a
href="#contact"
class="btn
btn-primary
btn-lg">
Contact Us
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer
class="bg-dark
text-white
py-5">
<div class="container">
<div
class="row
g-4">
<div
class="col-12
col-md-6">
<h5>
MyCompany
</h5>
<p
class="text-white-50">
Creating 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="#about"
class="text-white
text-decoration-none">
About
</a>
<a
href="#services"
class="text-white
text-decoration-none">
Services
</a>
<a
href="#contact"
class="text-white
text-decoration-none">
Contact
</a>
</div>
</div>
</div>
<hr
class="my-4">
<p
class="text-center
text-white-50
mb-0">
© 2026 MyCompany.
All rights reserved.
</p>
</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 have combined the major Bootstrap concepts into one complete responsive website.
container to keep website content responsive and
properly aligned.
navbar-expand-lg to create a responsive navigation
bar.
row and responsive column classes to create website
layouts.
card for services, portfolio items, testimonials,
and pricing plans.
img-fluid to make images responsive.
form-control and form-label for
Bootstrap form controls.
btn classes for calls to action.
badge for compact labels and categories.
py-5, mb-5,
and g-4 to create consistent layouts.
d-flex and flex-wrap for flexible
button and link layouts.
nav,
section, main, and footer.
Question: Which Bootstrap class makes an image responsive by setting its maximum width to 100% of its parent?