Tabs
Tab Pills
Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style. In the below example we've included .nav-pills on the .nav-tabs
<ul class="nav nav-tabs nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab"><i class="bi-house mr-5"></i> <span>Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab"><i class="bi-person mr-5"></i> <span>Profile</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab"><i class="bi-gear mr-5"></i> <span>Settings</span></a>
</li>
</ul><!-- / nav-pills -->
<div class="tab-content">
<div class="tab-pane fade show active mt-20 fs-14" id="home" role="tabpanel">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.</div>
<div class="tab-pane fade mt-20 fs-14" id="profile" role="tabpanel">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko.</div>
<div class="tab-pane fade mt-20 fs-14" id="settings" role="tabpanel">Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchforky.</div>
</div><!-- / tab-content -->
Bordered Tabs
The navigation item can have a simple bottom border as well. Just specify the class .bordered-tabs.
<ul class="nav nav-tabs bordered-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home-bordered" role="tab"><i class="bi-house mr-5"></i> <span>Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#profile-bordered" role="tab"><i class="bi-person mr-5"></i> <span>Profile</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#settings-bordered" role="tab"><i class="bi-gear mr-5"></i> <span>Settings</span></a>
</li>
</ul><!-- / nav-pills -->
<div class="tab-content">
<div class="tab-pane fade show active mt-20 fs-14" id="home-bordered" role="tabpanel">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.</div>
<div class="tab-pane fade mt-20 fs-14" id="profile-bordered" role="tabpanel">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko.</div>
<div class="tab-pane fade mt-20 fs-14" id="settings-bordered" role="tabpanel">Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchforky.</div>
</div><!-- / tab-content -->
Tabs Justified
Using class .nav-justified, you can force your tab menu items to use the full available width.
Suspendisse a aliquam odio. Etiam suscipit fringilla maximus. Nunc suscipit, erat nec iaculis luctus, nibh ligula ornare erat, vel sodales nulla dolor sit amet leo.
Aliquam lacus urna, fringilla a orci ut, fringilla finibus ex. Donec vitae quam rutrum, hendrerit enim vel, gravida urna. Cras id tortor vitae odio facilisis porta.
Quisque cursus imperdiet erat sit amet porttitor. Praesent quis rutrum mi, eu mattis sem. Nullam mollis maximus vestibulum sollicitudin eros ut congue vehicula.
<ul class="nav nav-pills nav-justified mb-15" role="tablist">
<li class="nav-item">
<a href="#tabHome" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
<i class="bi-house fs-16 mr-5 va-middle"></i>
<span class="va-middle">Home</span>
</a>
</li>
<li class="nav-item">
<a href="#tabAbout" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
<i class="bi-person fs-16 mr-5 va-middle"></i>
<span class="va-middle">About</span>
</a>
</li>
<li class="nav-item">
<a href="#tabSettings" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
<i class="bi-gear fs-16 mr-5 va-middle"></i>
<span class="va-middle">Settings</span>
</a>
</li>
</ul><!-- / nav -->
<div class="tab-content">
<div class="tab-pane show active" id="tabHome">
<p class="mb-0">Suspendisse a aliquam odio. Etiam suscipit fringilla maximus. Nunc suscipit, erat nec iaculis luctus, nibh ligula ornare erat, vel sodales nulla dolor sit amet leo.</p>
</div><!-- / tab-pane -->
<div class="tab-pane" id="tabAbout">
<p class="mb-0">Aliquam lacus urna, fringilla a orci ut, fringilla finibus ex. Donec vitae quam rutrum, hendrerit enim vel, gravida urna. Cras id tortor vitae odio facilisis porta.</p>
</div><!-- / tab-pane -->
<div class="tab-pane" id="tabSettings">
<p class="mb-0">Quisque cursus imperdiet erat sit amet porttitor. Praesent quis rutrum mi, eu mattis sem. Nullam mollis maximus vestibulum sollicitudin eros ut congue vehicula.</p>
</div><!-- / tab-pane -->
</div><!-- / tab-content -->
Vertical Tabs
You can stack your navigation by changing the flex item direction with the .flex-column utility.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam molestie augue id lectus suscipit, sit amet iaculis urna pulvinar. Sed posuere lacus a pharetra faucibus. Nam a ligula vitae diam luctus tempor. Mauris at ultricies quam, non tincidunt ante. Ut vel feugiat nisi. Sed sit amet imperdiet leo, in commodo dui.
Pellentesque vitae mi turpis. Pellentesque maximus massa dolor, vel varius orci euismod nec. Vestibulum ultrices commodo magna blandit ullamcorper. Curabitur porta elementum elit non condimentum. Nam id pellentesque nulla. Nulla egestas blandit tincidunt. Nullam a risus vitae urna bibendum blandit in sed quam vestibulum libero.
Suspendisse a aliquam odio. Etiam suscipit fringilla maximus. Nunc suscipit, erat nec iaculis luctus, nibh ligula ornare erat, vel sodales nulla dolor sit amet leo. Aliquam lacus urna, fringilla a orci ut, fringilla finibus ex. Donec vitae quam rutrum, hendrerit enim vel, gravida urna. Cras id tortor vitae odio facilisis porta. Vivamus molestie quam a consequat convallis.
<div class="row">
<div class="col-sm-4 mb-2 mb-sm-0">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active show" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
<i class="bi-house"></i>
<span class="ml-5">Home</span>
</a>
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
<i class="bi-person"></i>
<span class="ml-5">Profile</span>
</a>
<a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
<i class="bi-gear"></i>
<span class="ml-5">Settings</span>
</a>
</div><!-- / nav -->
</div><!-- / column -->
<div class="col-sm-8">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p class="mb-0">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam molestie augue id lectus suscipit, sit amet iaculis urna pulvinar. Sed posuere lacus a pharetra faucibus. Nam a ligula vitae diam luctus tempor. Mauris at ultricies quam, non tincidunt ante. Ut vel feugiat nisi. Sed sit amet imperdiet leo, in commodo dui.
</p>
</div><!-- / tab-pane -->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p class="mb-0">
Pellentesque vitae mi turpis. Pellentesque maximus massa dolor, vel varius orci euismod nec. Vestibulum ultrices commodo magna blandit ullamcorper. Curabitur porta elementum elit non condimentum. Nam id pellentesque nulla. Nulla egestas blandit tincidunt. Nullam a risus vitae urna bibendum blandit in sed quam vestibulum libero.
</p>
</div><!-- / tab-pane -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p class="mb-0">
Suspendisse a aliquam odio. Etiam suscipit fringilla maximus. Nunc suscipit, erat nec iaculis luctus, nibh ligula ornare erat, vel sodales nulla dolor sit amet leo. Aliquam lacus urna, fringilla a orci ut, fringilla finibus ex. Donec vitae quam rutrum, hendrerit enim vel, gravida urna. Cras id tortor vitae odio facilisis porta. Vivamus molestie quam a consequat convallis.
</p>
</div><!-- / tab-pane -->
</div><!-- / tab-content -->
</div><!-- / column -->
</div><!-- / row -->