How to create a navbar in Bootstrap?

Answer 1

You can use the Bootstrap navbar component to create responsive navigation header for your website or application. These responsive navbar initially collapsed on devices having small viewports like cell-phones but expand when user click the toggle button. However, it will be horizontal as normal on the medium and large devices like laptop or desktop.

Default Navbar

To create a default navbar −

Add the classes .navbar, .navbar-default to the <nav> tag.

Add role = "navigation" to the above element, to help with accessibility.

Add a header class .navbar-header to the <div> element. Include an <a> element with class .navbar-brand. This will give the text a slightly larger size.

To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.

Example

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Preview