BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Navbar

In this tutorial you will learn how to create static and fixed positioned responsive navigation headers using the Bootstrap navbar component.

Creating a Simple Navbar with Bootstrap

You can use the Bootstrap navbar component to create responsive navigation header for your website or application. These responsive navbar initially collapsed on devices having small viewports like cell-phones but expand when user click the toggle button. However, it will be horizontal as normal on the medium and large devices like laptop or desktop.

You can also create different variations of the navbar such as navbars with dropdown menus and search boxes as well as fixed positioned navbar with much less effort. The following example will show you how to create a simple static navbar with navigation links.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Home</a>
            <a href="#" class="nav-item nav-link">Profile</a>
            <a href="#" class="nav-item nav-link">Messages</a>
            <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
        </div>
        <div class="navbar-nav ml-auto">
            <a href="#" class="nav-item nav-link">Login</a>
        </div>
    </div>
</nav>

— The output of the above example will look something like this:

Moreover, instead of plain text, you can also place your logo image inside the navbar. However, you need to set the logo height manually to fit it properly inside the navbar, as shown here:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">
        <img src="images/logo.svg" height="28" alt="CoolBrand">
    </a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Home</a>
            <a href="#" class="nav-item nav-link">Profile</a>
            <a href="#" class="nav-item nav-link">Messages</a>
            <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
        </div>
        <div class="navbar-nav ml-auto">
            <a href="#" class="nav-item nav-link">Login</a>
        </div>
    </div>
</nav>

— The output of the above example will look something like this:

Note: Use the utility classes such as .ml-auto, .mr-auto, .justify-content-between, etc. to align the nav links, forms, buttons or text inside the navbar.


Adding Dropdowns to Navbar

You can also include dropdowns and search box within the navbars, as shown here:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Home</a>
            <a href="#" class="nav-item nav-link">Profile</a>
            <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Inbox</a>
                    <a href="#" class="dropdown-item">Sent</a>
                    <a href="#" class="dropdown-item">Drafts</a>
                </div>
            </div>
        </div>
        <form class="form-inline">
            <div class="input-group">                    
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </form>
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link">Login</a>
        </div>
    </div>
</nav>

— The output of the above example will look something like this:

Tip: To create navbars that is not fixed on the top or bottom, place it anywhere within a .container, which sets the width of your site and content.

Check out the snippets section for examples of some beautifully designed Bootstrap navbars.


Placing Search Form inside Navbar

Search form is very common component of the navbars and you have seen it on various website quite often. You can place various form controls and components within a navbar using the class .form-inline on the <form> element, as shown in the following example:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Home</a>
            <a href="#" class="nav-item nav-link">About</a>
            <a href="#" class="nav-item nav-link">Products</a>
        </div>
        <form class="form-inline ml-auto">
            <input type="text" class="form-control mr-sm-2" placeholder="Search">
            <button type="submit" class="btn btn-outline-light">Search</button>
        </form>
    </div>
</nav>

— The output of the above example will look something like this:


Changing the Color Scheme of Navbars

You can also change the color scheme of the navbar by using the .navbar-light for the light background colors, or .navbar-dark for the dark background colors. Then, customize it with the background-color utility classes, such as .bg-dark, .bg-primary, and so on.

Alternatively, you can also apply the CSS background-color property on the .navbar element yourself to customize the navbar theme, as shown in the following example:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
    <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #ddeeff;">
    <!-- Navbar content -->
</nav>

— The output of the above example will look something like this:


Bootstrap Fixed Navbar

Bootstrap also provides mechanism to create navbar that is fixed on the top or bottom of the viewport and will scroll with the content on the page.

Creating the Fixed to Top Navbar

Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the viewport, so that it won't scroll with the page. Here's an example:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <!-- Navbar content -->
</nav>

Creating the Fixed to Bottom Navbar

Similarly, add the class .fixed-bottom on the .navbar element to fix the navbar at the bottom of the viewport, as shown in the following example:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom">
    <!-- Navbar content -->
</nav>

Creating the Sticky Top Navbar

You can also create sticky top navbar that scrolls with the page until it reaches the top, then stays there, by simply using the .sticky-top class on the .navbar element, like this:

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <!-- Navbar content -->
</nav>

Tip: Place the fixed .navbar content inside the .container or .container-fluid for proper padding and alignment with the rest of the content.

Note: Remember to add padding (at least 70px) to the top or bottom of the <body> element to prevent the content to go underneath the navbar while implementing the fixed top or bottom navbar. Also, be sure to add your custom style sheet after the core Bootstrap CSS file, otherwise style rules in your style sheet may be overridden by the Bootstrap's one.

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.