Responsive Navbar with Bootstrap
Responsive Navbar with Bootstrap
Bootstrap has a very interesting feature of providing a navbar from its prebuilt CSS and JS features. This navbar comes with a variety of choices of features. This is really feasible for the coder to generate a nice responsive navbar with quite a few codes. Bootstrap makes the navbar not only responsive but also generates many options and features like drop-down, search, and many more, in it.
The .navbar class of Bootstrap provides different attributes. This generates a wrapping method to generate the navbar. It has different breaking points which can be mentioned according to the requirements. (-sm|-md|-lg|-xl)
The default property of the navbar is fluid which makes it generate the navbar full to the viewport width. This is very much responsive by nature and supports many sub-components, some of them are:
- Proving Nav-element: To list out the navbar elements the .nav-item is used. This will automatically display the text the coder wants to display as a navbar element.
- Active nav-element: .nav-item active is to be used when there is a need to show one or more navbar elements as active regardless of whether they are clicked or not.
- Branding area: It has an area where we can put the branding image or text in the navbar. This element should be inside .navbar-brand.
- Hamburger toggler: The .navbar-toggler class provides the coder to access a responsive hamburger toggle menu with a collapsible menu plugin.
- Drop Down Items: To generate a drop-down menu in the navbar there are 2 classes that are needed. The first one is .dropdown-menu under which the menu items to be declared and the second is .dropdown-item which is used to declare the items.
- Colors in Navbar: There are various set of classes in Bootstrap which can be used in the navbar to generate some colors such as .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg- utilities.
<nav class="navbar navbar-expand-lg navbar-light " style="background-color: skyblue; height: 85px; font-size:1.3rem;"> <a class="navbar-brand" href="#">Brand Name</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
In the above code, the brand name and the condition for the hamburger toggle menu are written. This also has some inline styling. The navbar has a breakpoint of shrinking at -lg.
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#" >Active Element <span class="sr-only">(current)</span></a > </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Option</a> <a class="dropdown-item" href="#">Another Option</a> <a class="dropdown-item" href="#">Another Option</a> <a class="dropdown-item" href="#">Another Option</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn my-2 my-sm-0" type="submit" style="background-color: red;"> Search </button> </form> </div> </nav>
In the above code, the navbar items are declared in which there is a dropdown menu section which is having dropdown items. These can be viewed once clicked in it. Along with this, a form inline section is mentioned along with a button. This can take input and fire a search event.
There is an active navbar item and the dropdown list is displayed.
The responsive version of the navbar.