English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The navigation bar is a great feature and a prominent feature of Bootstrap websites. The navigation bar acts as a responsive header base component in your application or website. The navigation bar is folded in the view of mobile devices and expands horizontally as the available viewport width increases. At the core of Bootstrap navigation bars, the navigation bar includes the site name and basic navigation definition styles.
The steps to create a default navigation bar are as follows:
Add a class to the <nav> tag .navbar, .navbar-default.
Add to the above element role="navigation"to enhance accessibility.
Add a title class to the <div> element .navbar-header, which contains a class with navbar-brand the <a> element. This will make the text appear larger.
To add links to the navigation bar, simply add a class with .nav, .navbar-nav an unordered list is sufficient.
Below is an example to demonstrate this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Default navigation bar</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
.collapse, .navbar The collapsed navigation bar is actually a class-collapse within the <div>. .navbar-toggle and two data- button of the element. data-toggleto tell JavaScript what to do with the button, the second is data-targetthree with class .icon-bar The <span> created by .nav-collapse elements within <div>.To achieve the above functions, you must include Bootstrap Collapse (Collapse) Plugin.
Below is an example to demonstrate this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Responsive navigation bar</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Basic Tutorial</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div></nav> </body> </html>Test and see ‹/›
The results are as follows:
You can use the class .navbar-btn Add a button to the <button> element not within <form>, so that the button is vertically centered in the navigation bar..navbar-btn that can be used on <a> and <input> elements.
Do not use .navbar-nav used on the <a> element within .navbar-btn, because it is not a standard button class.
Below is an example to demonstrate this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - button in the navigation bar/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit button</button> </form> <button type="button" class="btn btn-default navbar-btn"> navigation bar button </button> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
If you need to include a text string in the navigation, please use the class .navbar-text.This is usually used with the <p> tag to ensure proper leading and color.Below is an example to demonstrate this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - text in the navigation bar</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div <p class="navbar-text">w3codebox user login</p> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
If you want to use icons within the regular navigation bar navigation components, then please use the class glyphicon glyphicon-* to set icons, more information can be found in Bootstrap icons , as shown in the following example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Non-navigation links</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span>Register</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Log in</a></li> </ul> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
You can use utility classes .navbar-left or .navbar-right Align navigation bars in the left or right Navigation links, forms, buttons, or text These components. Both of these classes add CSS float in the specified direction. The following example demonstrates this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Component alignment/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div !--Align to the left--> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> Align to the left-Submit button </button> </form> <p class="navbar-text navbar-left">Align to the left-Text</p> !--Align to the right--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> Align to the right-Submit button </button> </form> <p class="navbar-text navbar-right">Align to the right-Text</p> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Bootstrap navigation bars can be dynamically positioned. By default, it is a block-level element, and it is positioned based on its placement in HTML. With some helper classes, you can place it at the top or bottom of the page, or you can make it a static navigation bar that scrolls with the page.
If you want to fix the navigation bar at the top of the page, please add to .navbar class Add class .navbar-fixed-top. The following example demonstrates this:
To prevent the navigation bar from overlapping with other content at the top of the page body, add at least 50 pixels of inner padding (padding), the value of the padding can be set according to your needs.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Fixed to the top</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
If you want to fix the navigation bar at the bottom of the page, please add to .navbar class Add class .navbar-fixed-bottom. The following example demonstrates this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Fixed to the bottom</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
To create a navigation bar that scrolls with the page, please add .navbar-static-top class. This class does not require padding to be added to the <body>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Static Top Bar</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
To create a navigation bar with a black background and white text, simply add .navbar class to add .navbar-inverse class as shown in the following example:
To prevent the navigation bar from overlapping with other content at the top of the page body, add at least 50 pixels of inner padding (padding), the value of the padding can be set according to your needs.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Inverted Navigation Bar</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script> </head> <body <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Basic Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu <li><a href="#">jmeter</a>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows: