Basic Navigation
Below is an example of a basic navigation
<nav class="nav main-nav flex-column flex-md-row">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>Vertical Navigation
Below is an example of a basic navigation in a vertical mode
<nav class="nav main-nav-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>Pills Navigation
Below is an example of a pill navigation
<nav class="nav nav-pills flex-column flex-md-row">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>Vertical Pills Navigation
Below is an example of a pill navigation in vertical mode
<nav class="nav nav-pills flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>Horizontal Alignment
A navigation with center and right in which left is the default.
<div class="p-3 bg-light mb-3">
<nav class="nav main-nav flex-column flex-md-row justify-content-center">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>
</div>
<div class="p-3 bg-light">
<nav class="nav main-nav flex-column flex-md-row justify-content-end">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>
</div>Colored Nav Variations
A navigation with colored nav that wrapped the navigation.
<div class="p-3 bg-primary mb-3">
<nav class="nav main-nav main-nav-colored-bg main-nav-dark flex-column flex-md-row">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>
</div>
<div class="p-3 bg-secondary">
<nav class="nav main-nav main-nav-colored-bg main-nav-dark flex-column flex-md-row">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Pages</a>
<a class="nav-link" href="#">Custom</a>
</nav>
</div>Underline Navigation
Below is a type of navigation that have a line at the bottom of active link.
<nav class="nav main-nav-line flex-column flex-md-row">
<a class="nav-link active" data-toggle="tab" href="#">Home</a>
<a class="nav-link" data-toggle="tab" href="#">About</a>
<a class="nav-link" data-toggle="tab" href="#">Pages</a>
<a class="nav-link" data-toggle="tab" href="#">Custom</a>
</nav>Simple Tab Navigation
Below is a tab navigation that have only few links.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<div class="tab-content">
<div class="tab-pane active show" id="tabCont1">
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
</div>
<div class="tab-pane" id="tabCont2">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
</div>
<div class="tab-pane" id="tabCont3">
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
</div>