HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-itemfor each <li> and add the .nav-link class to their links
If you want to create a simple horizontal menu, add the
.nav
class to a <ul>
element, followed by .nav-item
for each <li>
and add the .nav-link
class to
their links:
<ul class="nav">
<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" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Add the .justify-content-center
class to center the nav, and the .justify-content-end
class to right-align the nav.
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Add the .flex-column
class to create a vertical nav:
<ul class="nav
flex-column">
Turn the nav menu into navigation tabs with the .nav-tabs
class. Add the .active
class to the active/current link. If you want the tabs to be togglable, see the last example on this page.
<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>
Turn the nav menu into navigation pills with the .nav-pills
class. If you want the pills to be togglable, see the last example on this page.
<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 .nav-justified
class (equal width):
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</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 class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</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>
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
.
If you want the tabs to fade in and out when clicking on them, add the
.fade
class to .tab-pane
:
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-bs-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
The same code applies to pills; only change the data-toggle
attribute to data-toggle="pill"
:
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-bs-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>