Navigation in Bootstrap helps in navigating through the website. It allows quick access to the links a user visits often.
The navbar
class is used to create a simple navigation bar by including .navbar
and .navbar-default
in the navigation tab:
<nav class="navbar navbar-default" role="navigation">
To make a scalable, responsive menu bar that collapses to a dropdown when displaying on mobile devices, use the following class to wrap the bar:
<div class="navbar-header">
You can also put forms within a navigation bar by adding the .navbar-form
class:
<form class="navbar-form navbar-left" role="search">
Similar to the navbar
class, .navbar-btn
adds a button to the bar that can perform many useful functions:
<button type="button" class="btn btn-default navbar-btn"> … </button>
By adding the .navbar-text
class, we can also add text to the navigation bar:
<p class="navbar-text"> … </p>
The navbar-link
class allows us to add standard links that are not in the navbar
navigation component:
<p class="navbar-text navbar-right"> <a href="#" class="navbar-link"></a> </p>
Adding the
navbar-fixed-top
class within the <nav>
tabs allows navbar
to dynamically position itself at the top of the page. Here is its syntax:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
The navbar-fixed-bottom
class allows the navigation bar to sit right at the bottom of the page. Here is its syntax:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
3.16.218.221