.nav
class and either .nav-pills
or .nav-tabs
to a <ul>
element containing the list of navigation items. Bootstrap navs followed by .nav-item
for each <li>
and add the .nav-link
class to their links
<ul class="nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<ul>
Elements<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Disabled</a>
</nav>
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned
, but you can easily change them to center (.justify-content-center
) or right(.justify-content-end
) aligned.
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr />
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Add the .flex-column
utility class to the .nav
element to stack the nav items vertically.
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
The basic bootstrap nav adds the .nav-tabs
class to generate a tabbed interface. .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
The bootstrap nav menu into navigation pills with the .nav-pills
class.
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Justify the tabs/pills with the equal width .nav-justified
class
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<br /><br />
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
You can add a dropdown menu to a tab
or pill
. In this case, the .dropdown
class is applied to a <li>
element (not a <div>
element).
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">HTML</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bootstrap</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Bootstrap 3</a>
<a class="dropdown-item" href="#">Bootstrap 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">jQuery</a>
</li>
</ul>
<br /><br />
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">HTML</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bootstrap</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Bootstrap 3</a>
<a class="dropdown-item" href="#">Bootstrap 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">jQuery</a>
</li>
</ul>
To make the tabs toggleable, add the data-toggle="tab"
attribute to each link. Then add a .tab-pane
class with a unique ID for every tab and wrap them inside a <div>
element with class .tab-content
.
Also, you can make tabs fade in by adding the .fade
class to each .tab-pane
. The first tab pane (or the active tab pane) must also have the .show
class to properly fade in initial content.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#html5">HTML5</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#css3">CSS3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#bootstrap4">Bootstrap 4</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="html5" class="container tab-pane active">
<h3>HTML5</h3>
<p>HTML5 (No space between "HTML" and "5")is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.</p>
</div>
<div id="css3" class="container tab-pane fade">
<h3>CSS3</h3>
<p>The CSS was started to develop around 1998. And till 2009, it was under development. The first working draft of CSS3 came in 19-01-2001. but it was initially declared early in the June 1999.</p>
</div>
<div id="bootstrap4" class="container tab-pane fade">
<h3>Bootstrap 4</h3>
<p>Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been many alpha releases. And finally after that on 10th August 2017, Bootstrap released the first beta for the version 4 of Bootstrap.</p>
</div>
</div>