Bootstrap Nav

Nav bar are used to show links, in bootstrap nav classs is used for responsive nav bar. While some classes are require to make nav toggler and some responsive styling.

Basic Nav

In this example bootstrap nav class is used to make a responsive nav bar. While toggler classe is used to make a the nav responsive. 

<nav class="navbar navbar-expand-lg navbar-light bg-light border">
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Courses</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Output of above code

Example of Vertical Nav

In this example bootstrap flex-column is used to make a vertical nav. While some other classes like text-primary are used to apply some styling. 

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link text-primary" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-primary" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-primary" href="#">Courses</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled text-primary" href="#">Disabled</a>
  </li>
</ul>

Output of above code

Example of Navbar

In this example bootstrap navbar class is used to make a responsive navbar. While some other classes like bg-light is used to apply some background colors and navbar-toggler class is used to make a navbar responsive. 


<nav class="navbar navbar-expand-lg navbar-light bg-light border">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Courses
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Courses 1</a>
          <a class="dropdown-item" href="#">Courses 2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Courses</a>
          </div>
      </li>
      <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Output of above code

Contextual Navbar

In this example some contextual classes are used to apply some styling. For example navbar-light class is used to make light backgroud color of navbar. 

<nav class="navbar navbar-expand-sm bg-light navbar-light border">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Courses</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Courses</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>


<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Courses</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>


<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Courses</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>


<nav class="navbar navbar-expand-sm bg-info navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Courses</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

Output of the above code











The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


Categories

Latest Posts

blog-image
New Courses
 March 18, 2020
blog-image
A great way to start
 March 21, 2020
blog-image
New Courses for you
 March 26, 2020
blog image
Start your training
 March 28, 2020