Lesson 57 of 60 – Bootstrap Landing Page Project
95%

Bootstrap Landing Page Project

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.

Project Goal: Create a professional responsive landing page containing a navbar, hero section, call-to-action buttons, features, services, pricing, testimonials, and footer sections.

1. Project Overview

A landing page is a webpage designed to introduce a product, service, business, course, or application to visitors.

Our landing page will contain:

  • Responsive navigation bar.
  • Hero section.
  • Call-to-action buttons.
  • Features section.
  • Services section.
  • About section.
  • Pricing cards.
  • Testimonials.
  • Call-to-action section.
  • Footer.

2. Create the HTML Document

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>

3. Add Bootstrap CSS

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.

4. Create the Navigation Bar

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>

5. Add Navigation Links

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.

6. Create the Hero Section

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>

7. Add the Hero Heading

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.

8. Add Hero Buttons

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.

9. Add a Hero Image

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.

10. Create the Features Section

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>

11. Create Feature Cards

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.

12. Create Three Feature Columns

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.

13. Add a Services Section

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>

14. Create Service Cards

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>

15. Create an About Section

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>

16. Add Statistics

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>

17. Create the Pricing Section

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>

18. Create a Pricing Card

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>

19. Add Pricing Features

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>

20. Create Three Pricing Plans

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.

21. Create the Testimonials Section

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>

22. Create a Testimonial Card

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>

23. Create a Call-to-Action Section

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>

24. Create the Footer

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>

25. Add Footer Navigation Links

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>

26. Organize the Complete Landing Page

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.

27. Make the Landing Page Responsive

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.

28. Add Bootstrap JavaScript

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.

29. Complete Landing Page Code

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>

30. Final Project Result

After completing this project, you will have a complete responsive Bootstrap landing page containing the major sections commonly found on business and product websites.

  • Responsive navigation bar.
  • Hero section.
  • Hero call-to-action buttons.
  • Features section.
  • Service cards.
  • About section.
  • Statistics section.
  • Pricing plans.
  • Pricing feature lists.
  • Testimonials.
  • Call-to-action section.
  • Responsive footer.
  • Bootstrap grid system.
  • Bootstrap cards.
  • Bootstrap buttons.
  • Bootstrap spacing utilities.
  • Bootstrap Flexbox utilities.
  • Responsive design.
Project Complete! You have created a complete responsive Bootstrap landing page using Bootstrap's navbar, grid, cards, buttons, typography, spacing, Flexbox, and responsive utilities.

📌 Key Points

  • Use navbar and navbar-expand-lg to create a responsive navigation bar.
  • Use container to provide responsive horizontal spacing.
  • Use row and responsive column classes to organize page sections.
  • Use display-4 and lead for prominent landing page typography.
  • Use btn classes to create call-to-action buttons.
  • Use card and card-body for feature, service, pricing, and testimonial sections.
  • Use h-100 when cards in the same row should fill the available column height.
  • Use img-fluid to make images responsive.
  • Use py-5 to create consistent vertical section spacing.
  • Use g-4 for spacing between grid items.
  • Use d-flex and flex-wrap to create flexible button and link layouts.
  • Use meaningful section IDs such as #home, #features, and #pricing for navigation.
  • Use table-responsive when a table needs horizontal scrolling on smaller screens.
  • Keep important content readable and accessible on different screen sizes.
  • Test the landing page on mobile, tablet, and desktop screen sizes.

🧠 Quick Quiz

Question: Which Bootstrap class is used to make a responsive navigation bar expand at the large breakpoint?