Lesson 59 of 60 – Bootstrap Complete Website Project
98%

Bootstrap Complete Website Project

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.

Project Goal: Build a complete responsive website by combining Bootstrap's grid system, navbar, cards, buttons, forms, badges, utilities, tables, responsive classes, and other components.

1. Project Overview

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:

  • Responsive navbar.
  • Hero section.
  • Features section.
  • Services section.
  • About section.
  • Statistics section.
  • Portfolio section.
  • Testimonials.
  • Pricing plans.
  • Contact form.
  • Call-to-action section.
  • Footer.

2. Create the HTML Document

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>

3. Add Bootstrap CSS

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.

4. Create the Responsive Navbar

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>

5. Add Navbar Links

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>

6. Create the Hero Section

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>

7. Add Hero Call-to-Action Buttons

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>

8. Add a Responsive Hero Image

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.

9. Create the Features Section

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>

10. Create Feature Cards

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>

11. Create the Services Section

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>

12. Add Service Cards

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>

13. Create the About Section

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>

14. Add About Image

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.

15. Create the Statistics Section

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>

16. Add More Statistics

Add additional statistics to complete the section.

  • 500+ Customers
  • 100+ Projects
  • 50+ Courses
  • 10+ Years Experience
<div
class="col-6
col-md-3">


    <h2>
        50+
    </h2>


    <p
    class="text-body-secondary">

        Courses

    </p>


</div>

17. Create the Portfolio Section

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>

18. Create Portfolio Cards

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>

19. Create the Testimonials Section

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>

20. Add Testimonial Cards

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>

21. Create the Pricing Section

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>

22. Create Pricing Cards

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>

23. Create the Contact Section

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>

24. Create the Contact Form

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>

25. Add Contact Information

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>

26. Create the Call-to-Action Section

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>

27. Create the Footer

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>

28. Make the Complete Website Responsive

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.

29. Complete Website Code

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>

30. Final Project Result

After completing this project, you have combined the major Bootstrap concepts into one complete responsive website.

  • Responsive navbar.
  • Hero section.
  • Call-to-action buttons.
  • Feature cards.
  • Services section.
  • About section.
  • Statistics.
  • Portfolio section.
  • Testimonials.
  • Pricing plans.
  • Contact form.
  • Contact information.
  • CTA section.
  • Responsive footer.
  • Bootstrap grid system.
  • Bootstrap cards.
  • Bootstrap forms.
  • Bootstrap badges.
  • Bootstrap buttons.
  • Bootstrap spacing utilities.
  • Responsive utilities.
Project Complete! You have now created a complete responsive website using Bootstrap. This project combines navigation, layout, cards, forms, buttons, responsive grids, utilities, and multiple website sections into one practical project.

📌 Key Points

  • Use container to keep website content responsive and properly aligned.
  • Use navbar-expand-lg to create a responsive navigation bar.
  • Use row and responsive column classes to create website layouts.
  • Use card for services, portfolio items, testimonials, and pricing plans.
  • Use img-fluid to make images responsive.
  • Use form-control and form-label for Bootstrap form controls.
  • Use btn classes for calls to action.
  • Use badge for compact labels and categories.
  • Use spacing utilities such as py-5, mb-5, and g-4 to create consistent layouts.
  • Use d-flex and flex-wrap for flexible button and link layouts.
  • Use meaningful section IDs so navbar links can navigate to page sections.
  • Use semantic HTML elements such as nav, section, main, and footer.
  • Always test the website on mobile, tablet, and desktop screen sizes.
  • A real contact form requires server-side processing or a backend service to actually send and store submitted data.

🧠 Quick Quiz

Question: Which Bootstrap class makes an image responsive by setting its maximum width to 100% of its parent?