How to Create, Edit, & Make a Navbar in Bootstrap

67% of mobile users will leave a website if they're frustrated with the navigation. That’s two-thirds of your mobile audience going to a competitor because of a problem you can easily fix.

To avoid this, you can create an awesome navigation header in Bootstrap. Bootstrap is an open-source CSS framework that lets you quickly implement mobile-first design on your website. While you will need to be familiar with HTML and CSS to use Bootstrap, you won't have to build your site from scratch.

A navigation bar is a particularly important feature because it allows visitors to quickly find important pages on your website, like your blog, product pages, pricing, and contact info. This improves the chances of visitors browsing your site longer. Let’s take a closer look at how Bootstrap approaches navbars and how you can make one.

Bootstrap 4 Navbar

Navbar is Bootstrap’s responsive navigation header. Here are a few key things 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 the generic <div> element.

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

If you haven’t yet installed Bootstrap, you can follow step-by-step instructions in The Ultimate Guide to Bootstrap CSS and then continue with this post.

How to Create a Bootstrap Navbar

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, use the following Bootstrap code in you HTML:

See the Pen How to Create a Basic Bootstrap Navbar - 1 by HubSpot (@hubspot) on CodePen.

This process is the same no matter what Bootstrap navbar example you choose to add to your website.

Bootstrap Navbar Styles

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

Bootstrap Navbar Dropdown

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

See the Pen How to Create a Basic Bootstrap Navbar - 2 by HubSpot (@hubspot) on CodePen.

In the example here, I replaced the placeholder text “Dropdown link,” “Action,” “Another Action,” and “Something else here.”

Bootstrap Navbar Color

To change the color 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.

Image Source

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

See the Pen How to Create a Basic Bootstrap Navbar - 3 by HubSpot (@hubspot) on CodePen.

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.

See the Pen How to Create a Basic Bootstrap Navbar - 4 by HubSpot (@hubspot) on CodePen.

Bootstrap Navbar Collapse

In the examples above, the classes .navbar-toggler, .navbar-collapse, and navbar-expand-lg 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:

See the Pen How to Create a Basic Bootstrap Navbar - 5 by HubSpot (@hubspot) on CodePen.

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 like this:

See the Pen Bootstrap Vertical Navbar by HubSpot (@hubspot) on CodePen.

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.

See the Pen Bootstrap Fixed Navbar by HubSpot (@hubspot) on CodePen.

It’s important to note that a fixed navbar may require 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 specific keyword. Simply nest the following snippet of code below the .navbar-brand class.

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.

See the Pen Bootstrap Navbar Forms by HubSpot (@hubspot) on CodePen.

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 HubSpot (@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 check out a few examples.

Website Menu V01

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

Bootstrap 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

Simple 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

Responsive 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

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

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