Bootstrap Navigation Bar And Links

Following the same process from the previous blogs, i will take you through different websites navigation bar and link

What is Navigation Bar?

 Is a set of buttons or images in a row or column that serves as a control point to link the user to sections on a website. The navigation bar may also be a single graphic image with multiple selections.

 It is usually a navigation header placed at the top of the Page

Navigation Bar at the top of the page

·         A standard navigation bar is created with <nav class="navbar navbar-default">.

The following example shows how to add a navigation bar to the top of the page:

<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>

The results of the code above will look similar to the picture above.

Inverted Navigation Bar

Just change the .navbar-default class into .navbar-inverse:

Example

 

<nav class=”navbar navbar-inverse”>
  
<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>

RESULTS:

Navigation Bar With A Dropdown

Navigation bars can also hold dropdown menus.

The following example adds a dropdown menu for the “Page 1” button:

Example

 

<nav class=”navbar navbar-inverse”>
  
<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 class=”dropdown”>
        
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Page 1
        
<span class=”caret”></span></a>
        
<ul class=”dropdown-menu”>
          
<li><a href=”#”>Page 1-1</a></li>
          
<li><a href=”#”>Page 1-2</a></li>
          
<li><a href=”#”>Page 1-3</a></li>
        
</ul>
      
</li>
      
<li><a href=”#”>Page 2</a></li>
      
<li><a href=”#”>Page 3</a></li>
    
</ul>
  
</div>
</nav>

RESULTS:

Navbar Buttons

To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap button:

Example

 

<nav class=”navbar navbar-inverse”>
  
<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=”#”>Link</a></li>
      
<li><a href=”#”>Link</a></li>
    
</ul>
    
<button class=”btn btn-danger navbar-btn”>Button</button>
  
</div>
</nav>

RESULTS:

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

The .navbar-fixed-top class makes the navigation bar fixed at the top:

Example

 

<nav class=”navbar navbar-inverse navbar-fixed-top”>
  
<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>

The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:

Example

<nav class=”navbar navbar-inverse navbar-fixed-bottom”>
  
<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>

Leave a Reply