Bootstrap Navbar

Navbars are considered as the responsive headers for the website. Navbars are the Meta components for the website. When the width of viewport is increases like in mobile devices, the navbars are destroyed and can even become horizontal. Navbars are basically used for the styling of websites.

Default Navbar:

Consider the following steps to create default navbar in bootstrap:

Use <nav> tag and add the classes .navbar, .navbar-default to it.
Add the attribute role to the <nav> Assign the value “navigation” to this attribute.
Now use the <div> element and add header class of navbar that is .navbar-header. To make the text of a bit larger size use can use <a> element along with the class navbar-brand.
We can also add links to the navbar. This can be done by using an enordered list with the classes .nav, .navbar-nav.

Consider the following example in which we have created a default navbar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” /bootstrap/ css / bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts/ jquery. min. js” >< / script >

< script src = ” /bootstrap / js/ bootstrap. min. js ” ></ script >

</ head >

< body >

< nav class = “navbar navbar- default” role = “navigation” >

< div class = “navbar- header” >

< /div >

< div >

< ul class = “nav navbar- nav” >

< li class = “active” >< a > Java < /a ></ li >

< li >< a > C++ </ a ></ li >

< li class = “dropdown” >

< a href = “#” class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” >< /b >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Modules < /a ></ li >

< li >< a > Loop </ a >< / li >

< li >< a > Operators </ a ></ li >

< /ul >

</ li >

</ ul >

</ div >

</ nav >

</ body >

< /html >

The above code will generate the following result:

OUTPUT:

Responsive Navbar:

In bootstrap responsive navbars can be added by using <div> tag along with the classes like .collapse, .navbar-collapse. We use the .navbar-toggle class to include a collapsing button. Further two more classes are added for the button and second for the element that is data-toggle and data-target. The function of data-toggle is to tell JavaScript that what has to be done with the collapsing button and data-target tells that which element is to be toggled. Then we use the .icon-bar class three times to include three horizontal lines on the button. This class is added when we have a screen of smaller width and we need to collapse the nav-bars. On clicking the button, the navbar will be expanded.

Consider the following example in which we have created responsive navbar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts/ jquery. min. js” ></ script >

< script src = “/ bootstrap/ js/ bootstrap. min. js ” ></ script >

</ head >

< body >

< nav class = “navbar navbar- default” role = “navigation” >

< div class = “navbar- header” >

< button type = “button” class = “navbar- toggle”

data- toggle = “collapse” data- target = “#example- navbar- collapse” >

< span class = “sr- only” ></ span >

< span class = “icon- bar” ></ span >

< span class = “icon- bar” >< / span >

</ button >

< a class = “navbar- brand” > Programming Languages </ a >

</ div >

< div class = “collapse navbar- collapse” id = “example- navbar- collapse” >

< ul class = “nav navbar- nav” >

< li class = “active” >< a > C++ </ a ></ li >

Python

</a>

<li><a>Python Modules</a></li>

<li><a>Python Operators</a></li>

<li><a>Python Loops</a></li>

</ul>

</li>

</ul>

</div>

</nav>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Forms in Navbar:

Navbar forms can be used in bootstrap by using the .navbar-form class. We do not use the default forms of bootstrap here as the navbar form will assure that the alignment and collapsing is done properly in the narrow screen. We can use the various alignment options for the alignment of form in the navbar.

Consider the following example to create form in navbar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css /bootstrap. min. css” rel = “stylesheet” >

< script src=”/scripts/jquery.min.js”></script >

</head>

<body>

<a class = “navbar- brand” >Programming Languages</a>

</div>

<div>

</div>

<button type = “submit” class = “btn btn-default”>Enter</button>

</form>

</div>

</nav>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Buttons in Navbar:

Buttons can also be added to navbars by using the .navbar-btn class in the <button> tag. This class can be used with the <a> and <input> elements.

Consider the following example in which we have created buttons in navbar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >

< script src = “/ scripts/ jquery. min . js” ></ script >

< script src = “/ bootstrap / js/ bootstrap. min. js” >< /script >

</head>

<body>

<a class = “navbar-brand”>Programming Languages</a>

</div>

<div>

</div>

<button type = “submit” class = “btn btn-default”>Enter</button>

</form>

<button type = “button” class = “btn btn-default navbar-btn”>Button in Navbar</button>

</div>

</nav>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Text in Navbar:

Text can be added or wrapped in navbar by using .navbar-text class with the <p> tag. This class is used with the <p> tag for a definite color.

Consider the following example in which we have added text in navbar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </title>

</head>

<body>

<a class = “navbar-brand”>Programming Languages</a>

</div>

<div>

<p class = “navbar-text”>This is the Text in Navbar</p>

</div>

</nav>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Non-nav Links:

The standard links can be added by using navbar-link class. These links are not available in navbar navigation components.

Consider the following example in which we have added standard links using navbar-link class:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

</head>

<body>

<a class = “navbar-brand”>Programming Languages</a>

</div>

<div>

This is the

</p>

</div>

</nav>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Component Alignment:

There are classes like .navbar-right and .navbar-left that are used to align the links, forms, buttons, and text in navbar.

Consider the following example in which we have aligned the navbar button and text:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >

< script src = ” /scripts / jquery. min. js ” ></ script >

< script src = “/ bootstrap / js / bootstrap. min. js” >< /script >

</ head >

< body >

< nav class = “navbar navbar- default” role = “navigation” >

< div class = “navbar- header” >

< a class = “navbar- brand” > Programming Languages < /a >

</ div >

< div >

< ul class = “nav navbar- nav navbar- left” >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” >< /b >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Python Modules </ a ></ li >

< li >< a > Python Operators </ a ></ li >

< li >< a > Python Loops </ a ></ li >

< /ul >

</ li >

</ ul >

< form class = “navbar- form navbar- right” role = “search” >

< button type = “submit” class = “btn btn- default” > Submit Button (Right Aligned) </ button >

</ form >

< p class = “navbar- text navbar- right” > Text (Right Aligned) < /p >

< ul class = “nav navbar- nav navbar- right” >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” >< /b >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Python Modules < / a ></ li >

< li >< a > Python Operators </ a ></ li >

< li >< a > Python Loops </ a ></ li >

< /ul >

</ li >

</ ul >

< form class = “navbar- form navbar- left” role = “search” >

< button type = “submit” class = “btn btn- default” >

Submit Button (Left Aligned)

</ button >

</ form >

< p class = “navbar- text navbar- left ” > Text (Left Aligned) < /p >

</ div >

< /nav >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Fixed to Top:

The navigation bar in bootstrap can be placed either on the top or at the bottom of the html page. The navigation bar can also be scrolled through the page. This can be done by using the helper classes for example .navbar-fixed-top,this class is used to fix the navigation bar at the top of the html page. This class is added to .navbar class. This class requires padding in the <body> tag. This is done to avoid the navigation bar to sit on the content in the webpage.

Consider the following example in which we have fixed the navigation bar at the top of the html page:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = ” /scripts / jquery. min. js ” >< /script >

< script src = ” / bootstrap/ js/ bootstrap. min. js” >< / script >

</ head >

< body >

< nav class = “navbar navbar- default navbar- fixed- top” role = “navigation” >

< div class = “navbar- header” >

< a class = “navbar- brand” > Programming Languages < /a >

</ div >

< div >

< ul class = “nav navbar- nav” >

< li class = “active” >< a > C++ </ a ></ li >

< li >< a > Java </ a ></ li >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” >< /b >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Python Modules </ a ></ li >

< li >< a > Python Operators </ a ></ li >

< li >< a > Python Loops </ a ></ li >

< /ul >

</ li >

</ ul >

</ div >

</ nav >

</ body >

< /html >

The above code will generate the following result:

OUTPUT:

Fixed to Bottom:

To fix the navigation bar at the bottom of the page use the helper class that is.navbar-fixed-bottom. This class is added to .navbar class.

Consider the following example in which we have fixed the navigation bar at the bottom of the html page:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts / jquery. min. js ” >< /script >

< script src = “/ bootstrap / js/ bootstrap. min. js” ></ script >

< /head >

< body >

< nav class = “navbar navbar- default navbar- fixed- bottom” role = “navigation” >

< div class = “navbar- header” >

< a class = “navbar- brand ” > Programming Languages </ a >

</ div >

< div >

< ul class = “nav navbar- nav” >

< li class = “active” >< a > C++ < / a ></ li >

< li >< a > Java </ a >< / li >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” >< /b >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Python Modules </ a ></ li >

< li >< a > Python Operators </ a ></ li >

< li >< a > Python Loops </ a >< / li >

< /ul >

</ li >

< /ul >

</ div >

</ nav >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Static Top:

A navigation bar in bootstrap can be scrolled through the page when we use the .navbar-static-top class. For this class no padding is required in the <body> tag.

Consider the following example in which we have created a navigation bar that can be scrolled through the page:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js” ></ script >

< script src = ” / bootstrap/ js/ bootstrap. min. js” ></ script >

< /head >

< body >

< nav class = “navbar navbar- default navbar- static- top” role = “navigation” >

< div class = “navbar- header” >

< a class = “navbar- brand ” > Programming Languages < /a >

</ div >

< div >

< ul class = “nav navbar- nav” >

< li class = “active” >< a > C++ </ a ></ li >

< li >< a > Java </ a ></ li >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” ></ b >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Python Modules </ a >< / li >

< li >< a > Python Operators </ a ></ li >

< li >< a > Python Loops </ a ></ li >

< /ul >

</ li >

< /ul >

</ div >

</ nav >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Inverted Navbar:

The inverted navbar can be added in bootstrap by using the .navbar-inverse class with the .navbar class. When using this class we need padding of minimum 50 pixels in the <body> tag. This is done to avoid the navigation bar to appear on the content in the page.

Consider the following example in which we have created an inverted navigation bar with black background color and white text written on it, this will be the inverted navigation bar because the original bar has white background color and black text written:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap/ js/ bootstrap. min. js ” ></ script >

< /head >

< body >

< nav class = “navbar navbar- inverse” role = “navigation” >

< div class = “navbar – header” >

< a class = “navbar- brand ” > Programming Languages < /a >

</ div >

< div >

< ul class = “nav navbar- nav” >

< li class = “active” >< a > C++ < /a ></ li >

< li >< a > Java < /a >< /li >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” >< /b >

< /a >

< ul class = “dropdown- menu” >

< li >< a > Python Modules </ a >< / li >

< li >< a > Python Operators </ a ></ li >

< li >< a > Python Loops < /a ></ li >

< /ul >

</ li >

< /ul >

</ div >

</ nav >

< /body >

</ html >

The above code will generate the following result:

OUTPUT:

Inverted Navbar

Prev: Bootstrap Navigation Elements

Next: Bootstrap Breadcrumb