How to create a menu using navbar-inverse in Bootstrap ?
In this article, we will learn how to create a menu using the navbar-inverse in Bootstrap & will also understand its implementation through the example. The menu bar is a very important part while making a navigation bar for the website. We can create a menu bar along with inverse the color of the menu bar using the Bootstrap navbar-inverse class.
The navbar in Bootstrap contains many classes such as:
- .navbar-brand class: This class is used for your company, product, or project name, or any brand name.
- .navbar-nav class: This class is used for full-height and lightweight navigation (including support for dropdowns).
- .navbar-toggler class: This class is used for the collapse plugin and other navigation toggling behaviors.
- .navbar-text class: This class is used for adding vertically centered strings of text.
- .collapse.navbar-collapse class: This class is used for grouping and hiding navbar contents by a parent breakpoint.
- The flex and spacing utility classes are used for any form controls and actions.
We will understand the above classes & their usage through the example. Let’s see how to implement navbar using Bootstrap.
Step 1: Import the Bootstrap CDN links inside our HTML file.
<!– Bootstrap compiled and minified CSS –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css” integrity=”sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu” crossorigin=”anonymous”/><!– Bootstrap compiled and minified JavaScript –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” integrity=”sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd” crossorigin=”anonymous”></script>
Step 2: Add the <nav> tag inside your <body> with the navbar and navbar-default classes inside in it.
<nav class="navbar navbar-default "> <!-- content --> </nav>
Step 3: Create a <nav> tag with a class name as navbar navbar-default, & inside of <nav> tag, we will create a <div> with class name as “container-fluid”. Now, in order to use the brand logo or name, we will add a class as navbar-brand, and inside it, create a <ul> tag with a class name as “nav navbar-nav”, followed by the list of the item using the<li> tag.
<nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand" href="#">GeekforBeginner</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Web Technology </a></li> <li><a href="#">Data Structure</a></li> <li><a href="#">Algorithm</a></li> <li><a href="#">Competitive Programming</a></li> <li><a href="#">Programming Languages</a></li> </ul> </div> </nav>
At this stage, we have created a basic navigation bar using Bootstrap. The below code example illustrates the basic navbar in Bootstrap.
Complete Code:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity = "sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin = "anonymous" /> < title >w3wiki Bootstrap Tutorial</ title > </ head > < body > < nav class = "navbar navbar-default" > < div class = "container-fluid" > < a class = "navbar-brand" href = "#" >GeekforBeginner</ a > < ul class = "nav navbar-nav" > < li class = "active" >< a href = "#" >Web Technology </ a ></ li > < li >< a href = "#" >Data Structure</ a ></ li > < li >< a href = "#" >Algorithm</ a ></ li > < li >< a href = "#" >Competitive Programming</ a ></ li > < li >< a href = "#" >Programming Languages</ a ></ li > </ ul > </ div > </ nav > </ body > </ html > |
Output:
From the above output, we can see that the menu-bar is having a white background and if we need to change the background to black and other text content to white, we can simply add the ‘.navbar-inverse’ class in the <nav> tag as shown below.
<nav class="navbar navbar-default navbar-inverse"> <!-- Content --> </nav>
Example: This example illustrates the use of the .navbar-inverse class for changing the background to black in Bootstrap.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity = "sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin = "anonymous" /> < title >w3wiki Bootstrap Tutorial</ title > </ head > < body > < nav class = "navbar navbar-default navbar-inverse" > < div class = "container-fluid" > < a class = "navbar-brand" href = "#" >GeekforBeginner</ a > < ul class = "nav navbar-nav" > < li class = "active" >< a href = "#" >Web Technology </ a ></ li > < li >< a href = "#" >Data Structure</ a ></ li > < li >< a href = "#" >Algorithm</ a ></ li > < li >< a href = "#" >Competitive Programming</ a ></ li > < li >< a href = "#" >Programming Languages</ a ></ li > </ ul > </ div > </ nav > </ body > </ html > |
Output:
As you can clearly see from the above output, the color is changed to black and fonts become white. Thus, we have successfully created a basic navigation bar using Bootstrap using the “navbar-inverse” class. Now, we can also add several features like dropdowns and search options inside our navigation bar.
In order to make a drop-down menu, we will be using the below code:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> </ul> </div>
For placing the search option to the right in the navbar, we will use the below code snippet:
<form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-default">Submit </button> </form>
At this point, we have made the updated navbar code after adding more features like drop-down and search bar.
Complete Code:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity = "sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin = "anonymous" /> < title >w3wiki Bootstrap Navbar Tutorial</ title > </ head > < body > < nav class = "navbar navbar-default navbar-inverse" > < div class = "container-fluid" > < a class = "navbar-brand" href = "#" >w3wiki</ a > < ul class = "nav navbar-nav" > < li class = "active" >< a href = "#" >Data Structure</ a ></ li > < li >< a href = "#" >Algorithm</ a ></ li > < li >< a href = "#" >Competitive Programming</ a ></ li > < li class = "dropdown" > < a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false" > Web Technology< span class = "caret" ></ span > </ a > < ul class = "dropdown-menu" > < li > < a href = "#" >HTML</ a > </ li > < li > < a href = "#" >CSS</ a > </ li > < li > < a href = "#" >JavaScript</ a > </ li > </ ul > </ li > </ ul > < form class = "navbar-form navbar-right" > < div class = "form-group" > < input type = "text" class = "form-control" placeholder = "Search" /> </ div > < button type = "submit" class = "btn btn-default" >Submit </ button > </ form > </ div > </ nav > </ body > </ html > |
Output:
NOTE: The class “.navbar-inverse” is now outdated. It is used in bootstrap to make the navbar dark till version 3.3.7. Now, the class “.bg-dark” is used to darken the components in the current version 5.0.0 & the previous version 4.6.1.
Contact Us