Navigation Components

  1. Navs
  2. tabs
  3. pills
  4. navbars

Basic Nav Classes

  • wtih/without ULs
  • nav
  • nav-item
  • nav-link
    • active
    • disabled
  • nav-pills
  • nav-tabs

Note: use flex box classes justify-content

  • nav-fill
  • nav-justified
  • flex-column
<ul class="nav nav-pills">
    <li class= "nav-item"><a class="nav-link active">Home</a></li>
</ul>

In example below i am using nav instead of list items and flex-cloumn and flex-sm-row to make it responsive.

<nav class="nav nav-tabs flex-column flex-sm-row">
    <a class="nav-item nav-link active">Home</a>
</nav>
  • navbar
  • navbar-expand(-BP)
  • bg-COLOR
    • primary, secondary, ….
  • navbar-light
  • navbar-dark
  • navbar-nav container
    • nav-item
    • nav-link
    • active
    • disabled

changing the color of navigation according to your theme

<nav class="navbar navbar-dark navbar-expand-sm" style="background-color: red">
    <div class="container">
        <div class="navbar-nav">
            <a class="nav-item nav-link"></a>
        </div>
    </div>
</nav>
Nelson Bighetti
Nelson Bighetti
Professor of Artificial Intelligence

My research interests include distributed robotics, mobile computing and programmable matter.