bootstrap nav

http://codepen.io/discoveryvip/pen/XjavNd?editors=1010

<nav class="navbar navbar-full navbar-dark " style="background-color: red" role="navigation">

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#myBar" aria-controls="myBar" aria-expanded="false" aria-label="nav toggle">
    ☰
  </button>
  <div class="collapse navbar-toggleable-xs" id="myBar" >
   
  <ul class="nav navbar-nav pull-md-left">
    <li class="nav-item active">
      <a class="nav-link" hrzef="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  </div>
</nav>

<p class="alert alert-success  alert-dismissible hidden-sm-up"  role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>Lorem ipsum dolor sit amet, <a href="#" class="alert-link">Link</a> consectetur adipiscing elit. Integer posuere erat a ante</p>
<div class="alert alert-danger  alert-dismissible "  role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>Lorem ipsum dolor sit amet, <a href="#" class="alert-link">Link</a> consectetur adipiscing elit. Integer posuere erat a ante</div>
<div class="alert alert-info  alert-dismissible " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>Lorem ipsum dolor sit amet consectetur adipiscing elit. Integer posuere erat a ante</div>
<div class="alert alert-warning alert-dismissible " role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>
 
  Lorem ipsum dolor sit amet consectetur adipiscing elit. Integer posuere erat a ante</div>

=======================================================================

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page:

WebSiteName

• Home
• Page 1
• Page 2
• Page 3

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

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:

Inverted Navigation Bar

WebSiteName

• Home
• Page 1
• Page 2
• Page 3

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>

Navigation Bar With Dropdown

WebSiteName

• Home
• Page 1 
• Page 2
• Page 3

Navigation bars can also hold dropdown menus.

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

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

Right-Aligned Navigation Bar

WebSiteName

• Home
• Page 1
• Page 2

•  Sign Up
•  Login

The .navbar-right class is used to right-align navigation bar buttons.

In the following example we insert a "Sign Up" button and a "Login" button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:

<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>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

Navbar Buttons

WebSiteName

• Home
• Link
• Link

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>

Navbar Forms

To add form elements inside the navbar, add the .navbar-form class to a form element and add an input(s). Note that we have added a .form-group class to the div container holding the input. This adds proper padding if you have more than one inputs (you will learn more about this in the Forms chapter).

<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>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>

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>