44% of mobile users reported that navigating a web page was difficult. This can impair their visitor experience and decrease the chance of them returning to your site.

To avoid this, you can create an awesome navigation header in Bootstrap. Bootstrap is an open-source development toolkit that offers templates for interface components so you can quickly add responsive features that enrich the visitor experience on your site. While you will need to be familiar with HTML and CSS to use Bootstrap, you won't have to build a site from scratch.

Free Intro Guide to HTML & CSS [Download Now]

A navigation bar is a particularly important feature because it allows visitors to quickly and easily find important pages on your website, like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and bounce rate.

Now that we understand the benefits of a navbar, let’s take a closer look at what it is and how you can create and edit one.

Bootstrap 4 Navbar

Navbar is Bootstrap’s responsive navigation header. It’s been a core component since the earliest release of Bootstrap, version 2.3.2. Additional and faster stylesheets for the navbar can be found in the latest Bootstrap, version 4.4.

Please note that these are the same stylesheets in Bootstrap 4.0, 4.2.1, and 4.3.1. So if you’ve already installed any of those previous versions, the following information will still apply.

If you haven’t installed any version of Bootstrap, you can follow step-by-step instructions in The Ultimate Guide to Bootstrap CSS and then continue on with the rest of this post.

How to Create a Bootstrap Navbar

Note: For the demo below, I’ll be building out my page in the W3Schools Online Code Editor. You can click any of the Source links to see the full code snippet behind the example.

Let’s say you don't want to download and host Bootstrap 4 locally so you started building with the official starter template for the latest version of Bootstrap CDN. Then you’ll have a basic Bootstrap layout that looks like this:

Basic bootstrap layout without navbar

Source

If this looks bare, don’t worry — it’s just a starting point. To build out a more complex web page, you can start adding code for essential interface components, like a navigation bar, to this HTML5 doctype. Let’s walk through that process below.

Say you want to add a standard navbar with links to your homepage, features page, and pricing page. You also want to use proper responsive styling so that your navbar contents collapse behind a hamburger button on mobile and then grow to occupy as much horizontal space as possible to stay aligned on larger screen sizes.

In that case, you’d take the following Bootstrap example and copy and paste it into the <body> section of your HTML5 doctype.

 

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

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

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

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

  </button>

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

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

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

      </li>

      <li class="nav-item">

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

      </li>

    </ul>

  </div>

</nav>

Here is what the final result would look like on desktop and smaller screens:

Basic bootstrap layout with mobile navbar collapse style

Source

This process will be the same no matter what Bootstrap navbar example you choose to add to your website. Now let’s move on to exploring the different styles available.

Bootstrap Navbar Styles

Below we’ll take a look at the different style options for Bootstrap’s navbar. That way you can pick the style that best suits your site’s branding.

Bootstrap Navbar Dropdown

Let’s say you want to include a lot of pages in your navbar. Instead of listing them all side-by-side, you might list the three most important and then include the rest in a dropdown menu. Or maybe you want to include some action items that visitors could take like contacting you, subscribing to your blog, or signing up for your newsletter. Then you could include those items and their corresponding webpages in the dropdown menu.

To do so, simply nest the following snippet of code after your .nav-links.

 

<li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

          Dropdown link

        </a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

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

          <a class="dropdown-item" href="#">Another action</a>

          <a class="dropdown-item" href="#">Something else here</a>

        </div>

      </li>

In the example below, I replaced the placeholder text “Dropdown link,” “Action,” “Another Action,” and “Something else here.” Here is what the final result looks like:

Basic bootstrap layout with navbar dropdown style

Source

Bootstrap Navbar Color

To change the color scheme of your navbar, you just have to change the combination of theming classes and background-color utilities mentioned in the first line of code.

In the first example, see where it says navbar-light bg-light? The CSS class .navbar-light calls for light background colors (while .navbar-dark calls for dark background colors). The .bg-light sets the navbar as a light gray. The other supported background colors are shown below.

Bootstrap background color utlities for navbar

Source

In the example below, I opted for the blue color labelled “info.” Here is what the final result looks like:

Basic bootstrap layout with navbar color style "info"

Source

Bootstrap Transparent Navbar

If you’d prefer that your navbar be the same color as your background color, then you don’t have to match up the colors. Instead, you can make your navbar transparent using the .bg-transparent utility. In the example below, I changed the background color of the whole web page using the hex color code #F7F7F7 and made the navbar transparent.

basic bootstrap layout with transparent navbar style

Source

Bootstrap Navbar Collapse

In the examples above, .navbar-toggler, .navbar-collapse, and navbar-expand-lg classes are all used so the navbar content collapses behind a button at the large breakpoint (960px). You can combine the .navbar-toggler and .navbar-collapse classes with .navbar-expand{-sm|-md|-lg|-xl} to change when the content collapses behind a button.

Let’s say I want the content to collapse at 540px, not 960px. Then I’d change “navbar-expand-lg” to “navbar-expand-sm” in my code and the result would look like this:

Basic bootstrap layout with navbar collapse style set to small breakpoint

Source

Bootstrap Vertical Navbar

Rather than have a horizontal navbar, you may want a vertical navbar on your site. In that case, you have to remove the .navbar-toggler, .navbar-collapse, and navbar-expand-lg classes.

The result will look something like this:

basic bootstrap layout with vertical navbar style

 

Source

Bootstrap Fixed Navbar

By default, navbars (like any HTML element) are positioned static by default. That means they are always positioned according to the normal flow of the page — referred to formally as the document object model (DOM).

If you’d like to place your navbar in non-static CSS positions, then you can use Bootstrap’s position utilities. Fixed navbars use position: fixed. They span the viewport from edge to edge and stay in the same place even as a visitor scrolls. You can fix your navbar to the top or bottom of the screen.

Below, I fixed my navbar to the bottom of the screen by adding .navbar fixed-bottom in the same line of code as the .navbar-expand{-sm|-md|-lg|-xl} class. I also added some dummy text in the body so you can see how it remains in the same spot as I scroll.

basic bootstrap layout with fixed bottom navbar style

Source

It’s important to note that the fixed position may require CSS padding to prevent overlap with other elements.

Bootstrap Navbar Forms

You can also add a search box in your navbar using the .form-inline class. That way, visitors can search your entire website for a topic or specific keyword.

You simply have to nest the following snippet of code below the .navbar-brand class.

 

<form class="form-inline">

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

    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

  </form>

In the example below, I wanted to change the color of the button from green to gray to look better with the navbar’s background color. To do so, I replaced “btn-outline-success” with “btn-outline-light.” There are other button color options to choose from as well. Here’s the final result:

basic bootstrap layout with navbar form style

Source

Improving UX on Your Bootstrap Site

By adding any of the navbar examples mentioned above on your website, you can help your visitors find content they’re looking for faster. This will not only provide them a better experience — it will also boost the chances of them browsing your site for longer.

New Call-to-action

 css introduction

Originally published May 18, 2020 7:00:00 AM, updated May 18 2020

Topics:

Bootstrap CSS