Documentation and examples for how to use Bootstrap’s included navigation components.
Bootstrap Navs documentationUse .flex-column class.
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
</li>
</ul>
Take that same HTML, but use .nav-pills instead:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
</li>
</ul>
Take that same HTML, but use .nav-classic instead:
<ul class="nav nav-classic">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
</li>
</ul>
<div class="bg-dark p-4">
<ul class="nav nav-white nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
</li>
</ul>
</div>
<ul class="nav nav-box nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
</li>
</ul>
Use .nav-fill class.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
</li>
</ul>
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content py-3" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
</div>