Bootstrap Navbar (Navigation Bar)

In bootstrap, Navbar is a navigation header, and it helps to navigate through the pages of the website. By default, the navbars are responsive so, based on the device screen size, the navbars will extend or collapse and toggleable to give the ability to navigate.

Bootstrap Create NavBar

To create a navbar in bootstrap, you need to add .navbar class, .navbar-expand{-sm|-md|-lg|-xl} class for responsive collapsing and color scheme classes to <nav> element. After that, create navbar links using <li> element with .nav-item class followed by <a> element with .nav-link class inside of <ul> element with .navbar-nav class.

The above example will return the result as shown below.

As discussed, the bootstrap navbars are responsive so, the above horizontal navbar will become vertical on small screen devices.

In case, if you want to create vertical navbars in bootstrap, remove responsive collapsing .navbar-expand{-sm|-md|-lg|-xl} class from <nav> element.

The above example will return the result as shown below.

Bootstrap Navbar with Brand / Logo

To highlight brand name or logo in the navbar, add .navbar-brand class to the respective element like as shown below.

If you observe the above example, we added .navbar-brand class to highlight the brand (Tutlane) name.

The above example will return the result as shown below.

In case if you want to highlight the brand logo in the navbar, add .navbar-brand class on images like as shown below.

The above example will return the result as shown below.

Bootstrap Colored Navbars

By using background color classes (.bg-light, .bg-dark, .bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger), navbar classes (.navbar-light, .navbar-dark) and custom background styles, we can change the text and background color of navbars based on our requirements.

If you observe the above example, we used .navbar-light and .navbar-dark classes to change the navbar text color. Here, the .navbar-light class is useful to show the text color in black and .navbar-dark is useful to show the text color in white. So, it’s better to use .navbar-light class with light background colors and .navbar-dark class with dark background colors.

The above example will return the result as shown below.

Bootstrap Navbar with Dropdown Menu

In bootstrap navbars, we can include dropdown menus based on our requirements.

The above example will return the result as shown below.

Bootstrap Navbars with Forms

In bootstrap, we can add form (<form>) controls such as textbox, button, etc. inside of navbar by adding .form-inline class to <form> element.

If you observe the above example, we created a form by adding .form-inline with required input controls such as textbox and button in the navbar.

The above example will return the result as shown below.

Bootstrap Collapsible Navbar

Generally, in small screen devices, we will hide the navigation menu and show the button to reveal the navigation menu when clicked on it.

To achieve this, you need to implement a collapsible navigation bar for that create a button with .navbar-toggler class and add data-toggle="collapse" and data-target="#navbarContent" attributes. After that, you need to create a <div> element with .collapse-navbar-collapse class and id attribute to wrap the navbar content inside of it. The <div> element id value needs to match with the data-target attribute value of the button.

The above example will return the result as shown below.

Bootstrap Fixed Navbar

In bootstrap, we have different classes like .fixed-top, .fixed-bottom, .sticky-top to make the navigation bar pinned on the top or bottom of the page in a fixed position.

By using .fixed-top class, you can make the navigation bar fixed at the top of the page.

To make the navigation bar fixed at the bottom of the page, you need to use .fixed-bottom class.

Same way, use .sticky-top class to make the navigation bar scrolls with the page until it reaches the top, then stays at the top of the page. 

This is how we can use the bootstrap navbar in our applications to create navigation menu bars based on our requirements.