Holla Tech - Learn
Bootstrap 3: Navigation Bar
 

A navigation header in a webpage is called a navigation bar.

To create a navigation bar using Bootstrap:
1. Create  a <nav> element with navbar and navbar-default/navbar-inverse classes.
2. Inside the <nav>, create a <div> element with navbar-header class (header) and then create an <a> element with navbar-brand class inside this <div>.
3. Inside the nav, add a <ul> element with nav and navbar-nav classes. The <ul> element should contain an <li> element for every navigation bar item.

The active/disabled classes can be used to highlight/disable navigation bar items.

Use navbar-right class to align items to the right of the navigation bar.

For Example: 

<div class=“container”>
  <nav class=“navbar navbar-default”>
    <div class=“navbar-header”>
      <a class=“navbar-brand” href=“#”>Home</a>
    </div>
    <ul class=“nav navbar-nav”>
      <li><a href=“#”>Page 0</a></li>
      <li><a href=“#”>Page 1</a></li>
      <li><a href=“#”>Page 2</a></li>
    </ul>
    <ul class=“nav navbar-nav navbar-right”>
      <li class=“active”><a href=“#”>Page 4</a></li>
    </ul>
  </nav>
</div> 

 

Adding the classes navbar-fixed-top/navbar-fixed-bottom to the <nav> element fixes the navigation bar at the top/bottom of the page.

TASK:
Paste the line of codes in a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT