67% of mobile users will leave a website if they're frustrated with the navigation. Poor navigation 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 user 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.

Download Now: Free Intro Guide to HTML & CSS

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 reduce your 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. Here are a few key points you should know about this component:

  • Navbars are responsive and fluid by default. Meaning, they expand or contract based on the width of the current viewport.
  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} classes. These classes determine when content collapses behind a button.
  • The <nav> element is a semantic HTML element. Using it ensures accessibility and is preferred over using a more generic element like a <div>.

The navbar has 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.6.

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

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

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 doc. Let’s walk through that process below.

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

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 doc.

 

<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

Image 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

Image 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

Image 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"

Image 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 #EAF0F6 and made the navbar transparent.

basic bootstrap layout with transparent navbar style

Image 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

Image Source

Note: I used the W3Schools Tryit Editor for this example so you could see how the result size changed. 

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

 

Image 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-1

Image 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

Image Source

Customize Bootstrap Navbar

If you'd like to create a completely unique navbar, then you can start with one of the pre-designed templates above and customize it using custom CSS. 

Let's look at an example. Say, I want to change the background color of my navbar to a custom color, rather than use any of the 10 color utility classes that Bootstrap provides.

In that case, I'd remove any color utility from my HTML (like "bg-light," for example). Then, in my CSS, I'd use the class selector .navbar and set the background property to the shade of orange I wanted (#FF7A59). 

Here's the CSS and the result:

See the Pen Customize Bootstrap Navbar with custom CSS by Christina Perricone (@hubspot) on CodePen.

To learn more about customizing Bootstrap, check out How to Edit, Customize, and Override Bootstrap CSS to Suit Your Brand.

Examples of Customized Bootstrap Navbars

Many developers and designers have created their own custom Bootstrap navbars and made them available for purchase or download. Let's take a look at a few of these examples below.

Website Menu V01

Example of customized bootstrap navabr that is transparent but turns a solid white on scroll

Website Menu V01 is a transparent Bootstrap navbar that turns solid white when a user begins to scroll. It features a multi-level dropdown menu as well as social media icons.

Bootstrap Navbar with Logo Centered Above

example of customized Bootstrap navbar with logo centered and above nav linksBootstrap navbar with logo centered above is a minimalist and modern example. Instead of having the navbar brand down and to the left, this example features a logo centered on the page and above the nav links. These nav links will collapse behind a toggle button on smaller screen sizes. 

Simple Horizontal Bootstrap Navbar

Example of customized bootstrap navabr that is somehwat transparent with a blue borderSimple Horizontal Bootstrap Navbar is an advanced navbar example. It has a custom background color that's somewhat transparent and a blue bottom border. The nav items are white but turn the same shade of blue when a user hovers over them. Drop down menus also appear when a user hovers over "browse by category" or "auctions."

Responsive Fixed Animated Navbar

Example of customized Bootstrap navbar that transitions from transparent to solid black on scroll

Reponsive Fixed Animated Navbar is an animated navbar example. As the user scrolls, the navbar transitions from a transparent background to a solid black. It also shrinks in size.  

Bootstrap Navbar Login Signup

Example of customized Bootstrap navbar with login dropdown menuBootstrap Navbar Login Signup is an example of how you could incorporate login or sign-up buttons into your Bootstrap navbar. This example features a login dropdown menu. When users click on the dropdown menu, they'll be invited to login via Facebook, Twitter, email or to create an account.

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.

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.

New Call-to-action

 css introduction

Originally published Jun 18, 2021 7:00:00 AM, updated August 23 2021

Topics:

Bootstrap & CSS