YouTipThe navbar is a great feature and a prominent part of Bootstrap websites. It serves as a responsive base component for navigation headers in your application or website. The navbar is collapsed in mobile device views and expands horizontally as the available viewport width increases. At its core, the navbar includes the site name and basic navigation definition styles.
\n\nDefault Navbar
\n\nFollow these steps to create a default navbar:
\n\n- \n
- Add the classes .navbar and .navbar-default to the
<nav>tag. \n - Add role="navigation" to the above element to improve accessibility. \n
- Add a header class .navbar-header to a
<div>element, which contains an<a>element with the class navbar-brand. This makes the text appear larger. \n - To add links to the navbar, simply add an unordered list with the classes .nav and .navbar-nav. \n
The following example demonstrates this:
\n\nExample
\n\n\n\n\n\nThe result is shown below:
\n\n\n\n
Responsive Navbar
\n\nTo add responsive behavior to the navbar, the content to be collapsed must be wrapped in a <div> with the classes .collapse and .navbar-collapse. The collapsed navbar is actually a button with the class .navbar-toggle and two data- attributes. The first is data-toggle, which tells JavaScript what to do with the button, and the second is data-target, which indicates which element to toggle. Three <span> elements with the class .icon-bar create the so-called hamburger button. These will toggle the elements within the .nav-collapse <div>. To achieve this, you must include the Bootstrap Collapse plugin.
The following example demonstrates this:
\n\nExample
\n\n\n\n\n\nThe result is shown below:
\n\nNavbar Forms
\n\nForms in the navbar do not use the default classes from the Bootstrap Forms chapter; instead, they use the .navbar-form class. This ensures proper vertical alignment and collapsing behavior in narrower viewports. Use the alignment options (which will be explained in detail in the Component Alignment section) to determine where the content is placed within the navbar.
\n\nThe following example demonstrates this:
\n\nExample
\n\n\n\n\n\nThe result is shown below:
\n\nNavbar Buttons
\n\nYou can add buttons to <button> elements not inside a <form> using the class .navbar-btn, which vertically centers the button on the navbar. .navbar-btn can be used on <a> and <input> elements.
\n\n\n\n
Do not use .navbar-btn on
<a>elements inside .navbar-nav, as it is not a standard button class.
The following example demonstrates this:
\n\nExample
\n\n\n\n\n\nThe result is shown below:
\n\nNavbar Text
\n\nIf you need to include text strings in the navigation, use the class .navbar-text. This is typically used with the <p> tag to ensure proper leading and color. The following example demonstrates this:
Example
\n\n\n\n\n\nThe result is shown below:
\n\nNavigation Links with Icons
\n\nIf you want to use icons within the regular navbar navigation components, use the class glyphicon glyphicon-* to set the icon. For more information, see Bootstrap Glyphicons, as shown in the example below:
\n\nExample
\n\n\n\n\n\nThe result is shown below:
\n\nComponent Alignment
\n\nYou can use the utility classes .navbar-left or .navbar-right to align _navigation links, forms, buttons, or text_ within the navbar to the left or right. Both classes add CSS floats in the specified direction. The following example demonstrates this:
\n\nExample
\n\n\n\n\n\nThe result is shown below:
\n\nFixed to Top
\n\nThe Bootstrap navbar can be dynamically positioned. By default, it is a block-level element positioned based on its placement in the HTML. With some helper classes, you can place it at the top or bottom of the page, or you can make it a static navbar that scrolls with the page.
\n\nIf you want the navbar fixed to the top of the page, add the class .navbar-fixed-top to the .navbar class. The following example demonstrates this:
\n\n\n\n\n\n
To prevent the navbar from overlapping other content at the top of the page body, add at least 50 pixels of padding to the
<body>tag. The padding value can be adjusted as needed.
Example
\n\n\n\n\n\nThe result is shown below:
\n\nFixed to Bottom
\n\nIf you want the navbar fixed to the bottom of the page, add the class .navbar-fixed-bottom to the .navbar class. The following example demonstrates this:
\n\nExample
\n\n\n\n\n\nThe result is shown below:
\n\nStatic Top
\n\nTo create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require adding padding to the <body>.
Example
\n\n\n\n\n\nThe result is shown below:
\n\nInverted Navbar
\n\nTo create an inverted navbar with a black background and white text, simply add the .navbar-inverse class to the .navbar class, as shown in the example below:
\n\n\n\n\n\n
To prevent the navbar from overlapping other content at the top of the page body, add at least 50 pixels of padding to the
<body>tag. The padding value can be adjusted as needed.
Example
\n\n\n\n\n\nThe result is shown below:
\n\n