HTML Code for this Element
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
Stack your navigation by changing the flex item direction with the .flex-column utility.
HTML Code for this Element
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. A facere at omnis alias consequatur dicta quod officiis perferendis saepe in excepturi ut nam quaerat laborum, error, ipsum vero nostrum amet?
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">
This is another section
</div>
<div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">
Also Another.
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">
Not the previous one. But another one.
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
The Last one.
</div>
</div>
</div>
Takes the basic nav and adds the .nav-underline
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
HTML Code for this Element
<nav>
<ul class="nav nav-underline gap-3" id="nav-tab" role="tablist">
<li class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</li>
<li class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</li>
<li class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</li>
<li class="nav-link disabled" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="navlink-disabled" aria-selected="false" disabled>Disabled</li>
</ul>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
</p>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
</p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
</p>
</div>
<div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
<p class="text-muted pt-3">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
</p>
</div>
</div>
Takes the basic nav and adds the .nav-tabs
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
HTML Code for this Element
<nav>
<ul class="nav nav-tabs" id="nav-tab" role="tablist">
<li class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home1" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</li>
<li class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile1" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</li>
<li class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact1" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</li>
<li class="nav-link disabled" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled1" type="button" role="tab" aria-controls="navlink-disabled" aria-selected="false" disabled>Disabled</li>
</ul>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home1" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
</p>
</div>
<div class="tab-pane fade" id="nav-profile1" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
</p>
</div>
<div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
</p>
</div>
<div class="tab-pane fade" id="nav-disabled1" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
<p class="text-muted pt-3">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
</p>
</div>
</div>
Nav pills are similar to tabs, but add .nav-pills to the .nav component.
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
HTML Code for this Element
<nav>
<ul class="nav nav-pills" id="nav-tab" role="tablist">
<li class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home1" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</li>
<li class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile1" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</li>
<li class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact1" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</li>
<li class="nav-link disabled" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled1" type="button" role="tab" aria-controls="navlink-disabled" aria-selected="false" disabled>Disabled</li>
</ul>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home1" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
</p>
</div>
<div class="tab-pane fade" id="nav-profile1" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
</p>
</div>
<div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
</p>
</div>
<div class="tab-pane fade" id="nav-disabled1" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
<p class="text-muted pt-3">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
</p>
</div>
</div>
Add .nav-justified to the .nav component. Works on all (Pills, Underline and Tabs).
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
HTML Code for this Element
<nav>
<ul class="nav nav-pills nav-justified" id="nav-tab" role="tablist">
<li class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#home2" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</li>
<li class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#profile2" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</li>
<li class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#contact2" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</li>
</ul>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Fee fi fo fum!, Here I come. Roared the terrible grumblump. I'm going to carry off your children and eat them for lunch. I'm going to grab them with my claws. And listen to them crunch. I'm going to scoop out their eyeballs. And suck out their guts. And gobble them up for dinner. And slurp their bones for lunch. fee fi fo fum, Here I come. I'm going to scoop out their eyeballs.. Oh Oh. Thats not it tho.
</p>
</div>
<div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Is something she would enjoy. Only you could make those words cute. I'm not looking for judgement, just a nod. Like looking at kittens. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate parties.
</p>
</div>
<div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<p class="text-muted pt-3 mb-0">
The last time I felt it was in the presence of my old master. I have traced the Rebel spies to her. Little short for a stormtrooper? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! You're all clear, kid. Let's blow this thing and go home!
</p>
</div>
</div>