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.
Live Preview <nav class="navbar navbar-expand-sm navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
</ul>
</nav>
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.
Live Preview <nav class="navbar navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
</ul>
</nav>
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.
Live Preview <nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Tutlane</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
</ul>
</nav>
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.
Live Preview <nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://www.tutlane.com/images/categorylogo/bootstrap.png" width="30" height="30" /> Bootstrap</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
</ul>
</nav>
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.
Live Preview <!--NavBar1-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
....
</nav>
<!--NavBar2-->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
....
</nav>
<!--NavBar3-->
<nav class="navbar navbar-expand-sm navbar-dark bg-danger">
....
</nav>
<!--NavBar4-->
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
....
</nav>
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.
Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Tutlane</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<!--Dropdown-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Tutorials</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Microsoft</a>
<a class="dropdown-item" href="#">JAVA</a>
<a class="dropdown-item" href="#">Database</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
</ul>
</nav>
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.
Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Tutlane</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Tutorials</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Microsoft</a>
<a class="dropdown-item" href="#">JAVA</a>
<a class="dropdown-item" href="#">Database</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
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.
Live Preview <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Tutlane</a>
<!--Button Toggler-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<!--Navbar Links-->
<div class="collapse navbar-collapse" id="Div1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
</ul>
</div>
</nav>
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.
Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<!-- Navbar Content -->
</nav>
To make the navigation bar fixed at the bottom of the page, you need to use .fixed-bottom
class.
Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-bottom">
<!-- Navbar Content -->
</nav>
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.
Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<!-- Navbar Content -->
</nav>
This is how we can use the bootstrap navbar in our applications to create navigation menu bars based on our requirements.