Bootstrap 4 Navbar Tutorial

Navigation menu bar is part of each pages on a website. Bootstrap 4 uses the base nav component to create navigation bar (shortly navbar). This helps to create different styles of navigation with the default precompiled component, eliminating the need to code on your own. In this tutorial let us explore on how to create navigation menu bar in Bootstrap 4.

Bootstrap 4 Navbar Tutorial

  1. Navbar component basics
  2. Parts of navbar
  3. Creating standard Bootstrap 4 navbar
  4. Using logo in navbar
  5. Navbar with backgrounds
  6. Navbar with container
  7. Using additional elements in navbar
  8. Showing external content in navbar on toggle
  9. Positioning of navbar component

1. Basics of Bootstrap 4 Navbar Component

Bootstrap 4 navbar component uses flexbox to make better alignment of each menu items. By default the menu is responsive using JavaScript collapse component. This essentially means you should include the bootstrap.min.js, jQuery and popper.min.js files in your HTML template for the responsive navbar to work.

Navbar by default is fluid occupying the full horizontal width of the layout. You can wrap the entire navbar inside “.container” class to restrict the width to the container or to any pre-defined width.

2. Parts of Bootstrap 4 Navbar Component

Unlike many other components, navbar itself is a collection of elements to make it as a package.

  • Use “.navbar” class with nav component to create navigational menu items and one of the “.navbar-expand-sm|md|lg/xl” classes for collapsing on required breakpoint to create hamburger icon.
  • You can also use <div> with role=”navigation” instead of <nav>. In this article we have used <nav> in all the examples.
  • If you want to remove the responsiveness then just add “.navbar-expand” class to the “.navbar” class.
  • Logo or brand is inserted using “.navbar-brand” class.
  • A search box form control is added using “.form-inline” class.
  • Text can be added in the navbar using “.navbar-text” class.
  • Link, button, dropdowns can be added using default components.
  • “.navbar-toggler” class is used to control the collapse behavior of the navbar on smaller screens. Further “.collapse” and “.navbar-collapse” classes are used to group navbar elements for smaller devices.
Related:  How to Install Styles in phpBB Forum?

Let us create a standard navigation bar without the logo to better understand the navbar component.

3. Standard Bootstrap 4 Navbar

The standard navbar contains the following items:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">WebNots</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">Widgets</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="themes.html">Themes</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End of Navbar -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Navbar by default is a full width element, you can control the width by placing the entire <nav> inside a <div> with “.container” class. As mentioned, navbar uses the standard HTML5 <nav> tag for building a navigation menu. Below is the explanation of the CSS classes used in the standard navbar:

  • “.navbar” class is required to identify the element as a navbar.
  • “.navbar-light” is used to add light color for the text and “.bg-light” is used for lighter background.
  • “.navbar-toggler”, “.navbar-toggler-right” and “.navbar-expand-lg” are used to enable the navigation toggle to a hamburger icon from large sized devices. The icon will be shown on the right side of the menu bar. Ensure to add these classes to make the navbar responsive.
  • “.navbar-nav”, “.nav-item” and “.nav-link” are used to create individual menu items for the navigation bar. In this example we have used unordered list for creating menu items. You can also simply use <a> tags for this purpose.
  • Use “.active” and “.disabled” classes with “.nav-item” to show active and disabled menu items in the navbar. When you use “.disabled” class with “.nav-link” then the hyperlink will be disabled.
  • A search box is added with the “.form-inline” class along with form controls and a primary button.
Related:  How to Add Checkbox and Radio Button in Microsoft Excel?

Special Offer: Get 91% discount on Mobirise Bootstrap website builder with 40+ themes and 1800+ blocks.

The code will produce the below result on the browser:

Standard Navbar

We have shown the above navbar code with the complete starter template for easy understanding. For all the below sections, we have only given the navbar code block. You can insert the code block between start and end navbar block of the above code to create a full template.

4. Using Logo in Navbar

The above navbar has only a text logo. You can easily add image logo using “.navbar-brand” class. Remember to adjust the height and width of the logo using additional inline CSS like below:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2" aria-controls="navbar2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" width="30" height="30" alt="Logo">
</a>
<a class="navbar-brand" href="index.html">WebNots</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar2">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="widgets.html" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Widgets
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="alerts.html">Alerts</a>
<a class="dropdown-item" href="badges.html">Badges</a>
<a class="dropdown-item" href="cards.html">Cards</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

It will produce the below result:

Navbar with Logo

Note in the above example, we have used a dropdown menu item and danger button for the search. Basically you can add almost any type of elements on the navbar.

5. Navbar with Backgrounds

Instead of light text and grey background, you can use light or dark background colors and adjust with “.bg-*” utility classes. For example, below is the example of using dark background color:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
...
</nav>

Also use one of the background utility classes to change the background color to primary, info, warning, success, secondary, light, dark or danger. Below is an example for danger color background, you may need to use custom CSS in order to make improve the visibility when using different colors.

<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
...
</nav>

Change the background to custom color using inline style like below:

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: yellow;">
...
</nav>

The results will be shown like below:

Related:  5 Free Coming Soon Bootstrap Templates

Navbar with Different Background Colors

6. Navbar With Container

Place the navbar component insider a <div> with “.container” class to restrict the width to fit the container width.

<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar Inside Container</a>
</nav>
</div>

You can also place a container insider the navbar as shown below. In this case the navbar will look more or less similar to standard component as the paddings will be removed automatically.

<nav class="navbar navbar-expand-lg navbar-light bg-primary text-white">
<div class="container">
<a class="navbar-brand" href="#">Container Inside Navbar</a>
</div>
</nav>

The result on the browser will look like below:

Navbar with Container

Special Offer: Get 91% discount on Mobirise Bootstrap website builder with 40+ themes and 1800+ blocks.

7. Navbar with Additional Elements

You can place text, input groups, buttons and any type of elements inside the navbar. Below is an example code for the same:

And here is how it will look:

Navbar with Different Elements

8. Showing External Content on Toggle

Navbar is not necessarily to be used as a menu. It can be used like accordion toggle to show external content. Below is an example code for creating a toggle with hamburger icon and will show the text content when clicked.

<div>
<nav class="navbar navbar-dark bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar6" aria-controls="navbar6" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbar6">
<div class="bg-info p-3">
<h3>Header Inside Collapse</h3>
<p>Content inside the collapse. Both header and content will be shown/hide when the hamburger button is toggled.</p>
</div>
</div>
</div>

It will look like below on a click:

Navbar with External Content

9. Positioning Navbar

The position of the navbar can be modified by adding addition CSS classes like below

<!-- Fixed Top Navbar -->
<nav class="navbar fixed-top navbar-dark bg-success"> 
...
</nav>

<!-- Fixed Bottom Navbar -->
<nav class="navbar fixed-bottom navbar-dark bg-success">
...
</nav>

<!-- Sticky Top Navbar -->
<nav class="navbar sticky-top navbar-dark bg-success">
...
</nav>

Wrapping Up

You can’t find a website without navigation menu. It helps users to get access to the important pages on your site and users can search using the search box. So, we hope the above Bootstrap 4 navbar tutorial was helpful to learn creating different types of navigation menu for your site.

Recommended Articles:

Leave a Comment