Bootstrap Navigation Bar

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Responsive Navbars

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Navbar classes to create responsive navigation bars for websites. We’ll pair navbars with images for a vibrant look.

What You’ll Learn

Creating a basic navbar
Adding a collapsible menu
Using navbar colors
Combining navbars with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Navbars

Bootstrap Navbars use the navbar class with nav-item and nav-link to create flexible, responsive navigation bars. They support branding, links, dropdowns, and collapsible menus for mobile devices.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Navbar

Start with a simple navbar with links. Use this code:

<div class="container">
    <h3>Basic Navbar</h3>
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">MySite</a>
            <div class="navbar-nav">
                <a class="nav-link active" href="#">Home</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Contact</a>
            </div>
        </div>
    </nav>
</div>

Explanation:

container: Centers and constrains content.
navbar navbar-expand-lg: Creates a responsive navbar that expands on large screens.
bg-light: Sets a light background.
navbar-brand: Styles the site name/logo.
navbar-nav and nav-link: Style navigation links.
active: Highlights the current page (Home).

This creates a clean, horizontal navbar.

Step 3: Add a Collapsible Menu

Make the navbar collapse into a hamburger menu on small screens. Try this:

<div class="container">
    <h3>Collapsible Navbar</h3>
    <nav class="navbar navbar-expand-lg bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand text-white" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <div class="navbar-nav">
                    <a class="nav-link text-white" href="#">Home</a>
                    <a class="nav-link text-white" href="#">Services</a>
                    <a class="nav-link text-white" href="#">Support</a>
                </div>
            </div>
        </div>
    </nav>
</div>

Explanation:

bg-primary: Blue background for the navbar.
navbar-toggler: Adds a hamburger button for mobile.
data-bs-toggle="collapse" data-bs-target="#navbarNav": Toggles the menu.
collapse navbar-collapse: Hides the menu on small screens until toggled.
text-white: Ensures links and brand are visible on the blue background.

The menu collapses on mobile and expands on click.

Step 4: Use Navbar Colors

Apply different background colors for styling. Add this:

<div class="container">
    <h3>Colored Navbar</h3>
    <nav class="navbar navbar-expand-lg bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand text-white" href="#">DarkSite</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#darkNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="darkNav">
                <div class="navbar-nav">
                    <a class="nav-link text-white active" href="#">Dashboard</a>
                    <a class="nav-link text-white" href="#">Reports</a>
                </div>
            </div>
        </div>
    </nav>
</div>

Explanation:

bg-dark: Dark background for a sleek look.
text-white: Keeps text visible.
navbar-toggler: Maintains mobile responsiveness.

The dark navbar offers a modern aesthetic.

Step 5: Combine with an Image

Pair a navbar with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-12">
            <h3>Navbar with Branding</h3>
            <nav class="navbar navbar-expand-lg bg-success">
                <div class="container-fluid">
                    <a class="navbar-brand text-white" href="#">EcoSite</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#ecoNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="ecoNav">
                        <div class="navbar-nav">
                            <a class="nav-link text-white active" href="#">Projects</a>
                            <a class="nav-link text-white" href="#">Blog</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="col-4 mt-3">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

bg-success: Green navbar for a fresh look.
navbar-brand and nav-link text-white: White text for contrast.
col-4 mt-3: Places the 200×150 green image below the navbar with margin-top.
The image suggests a visual context (e.g., eco-themed site).

The image enhances the navbar’s appeal.

Final Code

Here’s a combined example with varied navbars and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Navbar</h3>
            <nav class="navbar navbar-expand-lg bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Site</a>
                    <div class="navbar-nav">
                        <a class="nav-link active" href="#">Home</a>
                        <a class="nav-link" href="#">About</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Collapsible Navbar</h3>
            <nav class="navbar navbar-expand-lg bg-primary">
                <div class="container-fluid">
                    <a class="navbar-brand text-white" href="#">App</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#appNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="appNav">
                        <div class="navbar-nav">
                            <a class="nav-link text-white active" href="#">Dashboard</a>
                            <a class="nav-link text-white" href="#">Settings</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Project Navbar</h3>
            <nav class="navbar navbar-expand-lg bg-success">
                <div class="container-fluid">
                    <a class="navbar-brand text-white" href="#">Projects</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#projectNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="projectNav">
                        <div class="navbar-nav">
                            <a class="nav-link text-white active" href="#">Tasks</a>
                            <a class="nav-link text-white" href="#">Reports</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="col-5 mt-3">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A light-colored simple navbar with links (Home active, About).
A blue collapsible navbar with a hamburger menu (Dashboard active, Settings).
A green collapsible navbar (Tasks active, Reports) followed by a red image (250×150).
All navbars are responsive, collapsing on mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Navbar Docs for more options.
Try navbar-dark with bg-dark for a dark theme.
Add dropdowns to navbars for advanced menus.

Conclusion

You’ve mastered Bootstrap Navbars! With classes like navbar, navbar-expand-lg, and navbar-nav, plus striking images, you’ve created responsive, stylish navigation bars. Keep experimenting to enhance your webpages.