Bootstrap Navbar Project

Our project will contain a complete responsive website navbar.

The navbar will include:

• Website brand.
• Home link.
• About link.
• Courses link.
• Dropdown menu.
• Contact link.
• Login button.
• Mobile toggle button.

Bootstrap will automatically handle the responsive collapse behavior.

Start with a 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 Navbar Project
    </title>

</head>

<body>

    Navbar

</body>

</html>

Include Bootstrap CSS in the head section.

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">

This gives us access to Bootstrap's navbar classes and utilities.

The responsive navbar toggle and dropdown functionality require Bootstrap's JavaScript.

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

The Bootstrap bundle includes the JavaScript needed by components such as the navbar collapse and dropdown.

Start the navigation bar with the navbar class.

<nav class="navbar">

    Navbar Content

</nav>

Bootstrap navbars are built using the navbar class together with additional navbar utilities.

Use a Bootstrap background utility to style the navbar.

<nav
class="navbar
bg-dark">

    Navbar Content

</nav>

You can also use contextual background utilities such as bg-primary, bg-light, and others.

Place the navbar content inside a responsive container.

<nav class="navbar bg-dark">


    <div class="container">

        Navbar Content

    </div>


</nav>

The container keeps the navigation content organized.

The navbar-brand class is commonly used for the website name or logo.

<a
class="navbar-brand"
href="#">

    Soopro Pathshala

</a>

The brand can contain text, an image, or both.

Use the navbar-nav and nav-link classes.

<ul class="navbar-nav">


    <li class="nav-item">

        <a
        class="nav-link"
        href="#">

            Home

        </a>

    </li>


    <li class="nav-item">

        <a
        class="nav-link"
        href="#">

            About

        </a>

    </li>


</ul>

Use the active class to indicate the current page.

<a
class="nav-link active"
aria-current="page"
href="#">

    Home

</a>

The aria-current="page" attribute provides useful information to assistive technologies.

The navbar toggler is used to open and close the collapsed navigation on smaller screens.

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
aria-controls="mainNavbar"
aria-expanded="false"
aria-label="Toggle navigation">

    <span class="navbar-toggler-icon">
    </span>

</button>

The button targets the element with the ID mainNavbar.

Bootstrap provides navbar-dark and navbar-light classes for navbar content styling.

<nav
class="navbar
navbar-dark
bg-dark">

    ...

</nav>

For a dark navbar, navbar-dark helps provide suitable contrast for the navbar text and toggler.

The navigation links are placed inside a collapsible container.

<div
class="collapse navbar-collapse"
id="mainNavbar">


    Navigation Content


</div>

The ID must match the value used by the toggler's data-bs-target.

Combine the brand, toggler, collapse area, and navigation links.

<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark">


    <div class="container">


        <a
        class="navbar-brand"
        href="#">

            Soopro Pathshala

        </a>


        <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#mainNavbar"
        aria-controls="mainNavbar"
        aria-expanded="false"
        aria-label="Toggle navigation">

            <span
            class="navbar-toggler-icon">
            </span>

        </button>


        <div
        class="collapse
        navbar-collapse"
        id="mainNavbar">


            <ul
            class="navbar-nav
            ms-auto">


                <li class="nav-item">

                    <a
                    class="nav-link active"
                    href="#">

                        Home

                    </a>

                </li>


                <li class="nav-item">

                    <a
                    class="nav-link"
                    href="#">

                        About

                    </a>

                </li>


                <li class="nav-item">

                    <a
                    class="nav-link"
                    href="#">

                        Contact

                    </a>

                </li>


            </ul>


        </div>


    </div>


</nav>

The navbar-expand-lg class controls when the navbar changes from collapsed to expanded navigation.

navbar-expand-lg

The navigation is collapsed below the large breakpoint and expanded at the large breakpoint and above.

You can use other breakpoint variants such as:

• navbar-expand-sm
• navbar-expand-md
• navbar-expand-lg
• navbar-expand-xl
• navbar-expand-xxl

Use the Bootstrap spacing utility ms-auto to push the navigation list toward the end of the flex container.

<ul
class="navbar-nav
ms-auto">

    ...

</ul>

This is useful when the brand should remain on the left and the navigation should appear on the right.

A dropdown can contain additional navigation options.

<li
class="nav-item
dropdown">


    <a
    class="nav-link
    dropdown-toggle"
    href="#"
    role="button"
    data-bs-toggle="dropdown"
    aria-expanded="false">

        Courses

    </a>


    <ul class="dropdown-menu">


        <li>

            <a
            class="dropdown-item"
            href="#">

                HTML

            </a>

        </li>


        <li>

            <a
            class="dropdown-item"
            href="#">

                CSS

            </a>

        </li>


        <li>

            <a
            class="dropdown-item"
            href="#">

                JavaScript

            </a>

        </li>


    </ul>


</li>

Use dropdown-divider to visually separate groups of dropdown items.

<li>

    <hr class="dropdown-divider">

</li>

This can make a long dropdown easier to understand.

A Bootstrap button can be placed alongside the navigation links.

<a
href="#"
class="btn btn-primary
ms-lg-3">

    Login

</a>

The ms-lg-3 utility adds start-side margin from the large breakpoint and above.

You can add another button for registration.

<a
href="#"
class="btn btn-success
ms-lg-2">

    Sign Up

</a>

Multiple buttons can be placed inside the collapsed navbar area.

A search form can also be placed inside a navbar.

<form
class="d-flex
ms-lg-3
mt-3
mt-lg-0"
role="search">


    <input
    class="form-control me-2"
    type="search"
    placeholder="Search"
    aria-label="Search">


    <button
    class="btn btn-outline-success"
    type="submit">

        Search

    </button>


</form>

The responsive spacing classes help the form work well when the navbar is collapsed.

Bootstrap's shadow utilities can add visual depth.

<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark
shadow">

    ...

</nav>

The shadow utility applies a Bootstrap box shadow without requiring custom CSS.

Use spacing utilities to add vertical padding.

<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark
py-3">

    ...

</nav>

The py-3 class adds padding to the top and bottom.

The navbar brand can contain an image.

<a
class="navbar-brand
d-flex
align-items-center"
href="#">


    <img
    src="logo.png"
    alt="Soopro Pathshala"
    width="40"
    height="40"
    class="rounded-circle
    me-2">


    Soopro Pathshala


</a>

Use meaningful alternative text for informative images.

A practical responsive navbar can combine all the components learned so far.

<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark
py-3
shadow">


    <div class="container">


        Brand


        Toggler


        <div
        class="collapse
        navbar-collapse"
        id="mainNavbar">


            Navigation


            Search


            Buttons


        </div>


    </div>


</nav>

The navbar becomes collapsed on smaller screens and expanded at the specified breakpoint.

The important responsive classes are:

• navbar-expand-lg controls the expansion breakpoint.
• navbar-toggler creates the mobile toggle button.
• collapse creates the collapsible area.
• navbar-collapse styles the collapsed navigation.
• data-bs-toggle="collapse" activates the collapse behavior.
• data-bs-target="#mainNavbar" identifies the target element.

After the navbar, we can add a simple hero section to demonstrate how the navigation fits into a complete page.

<section
class="py-5
text-center">


    <div class="container">


        <h1>

            Learn New Skills

        </h1>


        <p>

            Learn web development
            step by step.

        </p>


        <a
        href="#"
        class="btn btn-primary">

            Explore Courses

        </a>


    </div>


</section>

The complete navbar structure contains five major parts:

1. Navbar container.
2. Brand.
3. Mobile toggler.
4. Collapsible navigation.
5. Navigation links and actions.

<nav class="navbar navbar-expand-lg">

    <div class="container">

        Brand

        Toggler

        <div
        class="collapse navbar-collapse">

            Links

            Dropdown

            Search

            Buttons

        </div>

    </div>

</nav>

Here is the complete responsive Bootstrap navbar project.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta
    name="viewport"
    content="width=device-width,
    initial-scale=1.0">


    <title>
        Soopro Pathshala
    </title>


    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">

</head>


<body>


<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark
py-3
shadow">


    <div class="container">


        <a
        class="navbar-brand
        fw-bold"
        href="#">

            Soopro Pathshala

        </a>


        <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#mainNavbar"
        aria-controls="mainNavbar"
        aria-expanded="false"
        aria-label="Toggle navigation">


            <span
            class="navbar-toggler-icon">
            </span>


        </button>


        <div
        class="collapse
        navbar-collapse"
        id="mainNavbar">


            <ul
            class="navbar-nav
            ms-auto
            align-items-lg-center">


                <li class="nav-item">

                    <a
                    class="nav-link active"
                    aria-current="page"
                    href="#">

                        Home

                    </a>

                </li>


                <li class="nav-item">

                    <a
                    class="nav-link"
                    href="#">

                        About

                    </a>

                </li>


                <li
                class="nav-item
                dropdown">


                    <a
                    class="nav-link
                    dropdown-toggle"
                    href="#"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">

                        Courses

                    </a>


                    <ul
                    class="dropdown-menu">


                        <li>

                            <a
                            class="dropdown-item"
                            href="#">

                                HTML

                            </a>

                        </li>


                        <li>

                            <a
                            class="dropdown-item"
                            href="#">

                                CSS

                            </a>

                        </li>


                        <li>

                            <a
                            class="dropdown-item"
                            href="#">

                                JavaScript

                            </a>

                        </li>


                        <li>

                            <hr
                            class="dropdown-divider">

                        </li>


                        <li>

                            <a
                            class="dropdown-item"
                            href="#">

                                All Courses

                            </a>

                        </li>


                    </ul>


                </li>


                <li class="nav-item">

                    <a
                    class="nav-link"
                    href="#">

                        Contact

                    </a>

                </li>


            </ul>


            <form
            class="d-flex
            ms-lg-3
            mt-3
            mt-lg-0"
            role="search">


                <input
                class="form-control me-2"
                type="search"
                placeholder="Search"
                aria-label="Search">


                <button
                class="btn
                btn-outline-light"
                type="submit">

                    Search

                </button>


            </form>


            <div
            class="d-flex
            gap-2
            mt-3
            mt-lg-0
            ms-lg-3">


                <a
                href="#"
                class="btn
                btn-primary">

                    Login

                </a>


                <a
                href="#"
                class="btn
                btn-success">

                    Sign Up

                </a>


            </div>


        </div>


    </div>


</nav>


<section
class="py-5
text-center">


    <div class="container">


        <h1>

            Learn New Skills

        </h1>


        <p class="lead">

            Learn web development
            step by step with
            Soopro Pathshala.

        </p>


        <a
        href="#"
        class="btn btn-primary">

            Explore Courses

        </a>


    </div>


</section>


<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>


</body>

</html>

After completing the project, you will have a complete responsive Bootstrap navbar.

• Responsive website brand.
• Responsive navigation links.
• Active navigation link.
• Courses dropdown menu.
• Dropdown divider.
• Search form.
• Login button.
• Sign Up button.
• Mobile navbar toggler.
• Responsive collapse behavior.
• Bootstrap spacing utilities.
• Bootstrap shadow utility.
• Responsive hero section.