Use the Bootstrap tab javascript plugin to extend navigational tabs and pills to create tab panes of local
content.
Read the official
Bootstrap Documentation for a full
list
of instructions and other options.
Change the style of .navs component with modifiers and utilities. Mix and match as needed, or
build
your own.
Tabs
Use class .nav-tabs to create basic nave tabs.
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.
<div class="nav-align-top">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-home" aria-controls="navs-top-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-profile" aria-controls="navs-top-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-messages" aria-controls="navs-top-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-top-home" role="tabpanel">
<p>
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear
claw
candy topping.
</p>
<p class="mb-0">
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o
jelly-o ice
cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
</p>
</div>
<div class="tab-pane fade" id="navs-top-profile" role="tabpanel">
<p>
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies
halvah
tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
</p>
<p class="mb-0">
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy
liquorice caramels.
</p>
</div>
<div class="tab-pane fade" id="navs-top-messages" role="tabpanel">
<p>
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi
bears
cake chocolate.
</p>
<p class="mb-0">
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing
sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie
jelly.
</p>
</div>
</div>
</div>Pills
Use class .nav-pills to create nave pills.
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.
<div class="nav-align-top">
<ul class="nav nav-pills mb-3" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-home" aria-controls="navs-pills-top-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-profile" aria-controls="navs-pills-top-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-messages" aria-controls="navs-pills-top-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-pills-top-home" role="tabpanel">
<p>
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear
claw
candy topping.
</p>
<p class="mb-0">
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o
jelly-o ice
cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
</p>
</div>
<div class="tab-pane fade" id="navs-pills-top-profile" role="tabpanel">
<p>
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies
halvah
tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
</p>
<p class="mb-0">
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy
liquorice caramels.
</p>
</div>
<div class="tab-pane fade" id="navs-pills-top-messages" role="tabpanel">
<p>
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi
bears
cake chocolate.
</p>
<p class="mb-0">
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing
sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie
jelly.
</p>
</div>
</div>
</div>Tabs Line
Use class .tabs-line class along with .nav-tabs to create tabs line.
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.
<div class="nav-align-top">
<ul class="nav nav-tabs tabs-line" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tabs-line-top-home" aria-controls="navs-tabs-line-top-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tabs-line-top-profile" aria-controls="navs-tabs-line-top-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tabs-line-top-messages" aria-controls="navs-tabs-line-top-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-tabs-line-top-home" role="tabpanel">
<p>
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear
claw
candy topping.
</p>
<p class="mb-0">
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o
jelly-o ice
cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
</p>
</div>
<div class="tab-pane fade" id="navs-tabs-line-top-profile" role="tabpanel">
<p>
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies
halvah
tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
</p>
<p class="mb-0">
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy
liquorice caramels.
</p>
</div>
<div class="tab-pane fade" id="navs-tabs-line-top-messages" role="tabpanel">
<p>
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi
bears
cake chocolate.
</p>
<p class="mb-0">
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing
sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie
jelly.
</p>
</div>
</div>
</div>Change the alignment of your nav with the following classes.
Top
Use class .nav-align-top to align navs top.
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.
<div class="nav-align-top">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-align-home">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-align-profile">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-align-messages">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-top-align-home">
<p>
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
powder.
Bear claw candy topping.
</p>
<p class="mb-0">
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
jelly-o
jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
sweet.
</p>
</div>
<div class="tab-pane fade" id="navs-top-align-profile">
<p>
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
cheesecake
fruitcake.
</p>
<p class="mb-0">
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
candy liquorice caramels.
</p>
</div>
<div class="tab-pane fade" id="navs-top-align-messages">
<p>
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
cupcake
gummi bears cake chocolate.
</p>
<p class="mb-0">
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
roll
icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
jelly-o
tart brownie jelly.
</p>
</div>
</div>
</div>Bottom
Use class .nav-align-bottom to align navs bottom.
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.
<div class="nav-align-bottom">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-bottom-home">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-bottom-profile">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-bottom-messages">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-top-bottom-home">
<p>
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
powder.
Bear claw candy topping.
</p>
<p class="mb-0">
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
jelly-o
jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
sweet.
</p>
</div>
<div class="tab-pane fade" id="navs-top-bottom-profile">
<p>
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
cheesecake
fruitcake.
</p>
<p class="mb-0">
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
candy liquorice caramels.
</p>
</div>
<div class="tab-pane fade" id="navs-top-bottom-messages">
<p>
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
cupcake
gummi bears cake chocolate.
</p>
<p class="mb-0">
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
roll
icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
jelly-o
tart brownie jelly.
</p>
</div>
</div>
</div>Left
Use class .nav-align-left to align navs left.
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.
<div class="nav-align-left">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-align-home">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-align-profile">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-align-messages">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-left-align-home">
<p>
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
powder.
Bear claw candy topping.
</p>
<p class="mb-0">
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
jelly-o
jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
sweet.
</p>
</div>
<div class="tab-pane fade" id="navs-left-align-profile">
<p>
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
cheesecake
fruitcake.
</p>
<p class="mb-0">
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
candy liquorice caramels.
</p>
</div>
<div class="tab-pane fade" id="navs-left-align-messages">
<p>
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
cupcake
gummi bears cake chocolate.
</p>
<p class="mb-0">
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
roll
icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
jelly-o
tart brownie jelly.
</p>
</div>
</div>
</div>Right
Use class .nav-align-right to align navs right.
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.
<div class="nav-align-right">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-right-align-home">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-right-align-profile">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-right-align-messages">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-right-align-home">
<p>
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps
powder.
Bear claw candy topping.
</p>
<p class="mb-0">
Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon
jelly-o
jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes
sweet.
</p>
</div>
<div class="tab-pane fade" id="navs-right-align-profile">
<p>
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream.
Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream
cheesecake
fruitcake.
</p>
<p class="mb-0">
Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton
candy liquorice caramels.
</p>
</div>
<div class="tab-pane fade" id="navs-right-align-messages">
<p>
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
cupcake
gummi bears cake chocolate.
</p>
<p class="mb-0">
Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
roll
icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
jelly-o
tart brownie jelly.
</p>
</div>
</div>
</div>Use tabs, pills & line tabs navs within card.
Tabs within Card
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere <div class="card text-center">
<div class="card-header border-bottom">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#navs-within-card-active" role="tab">Active</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#navs-within-card-link" role="tab">Link</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link disabled" data-bs-toggle="tab" data-bs-target="javascript:void(0)" role="tab">Disabled</button>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-within-card-active" role="tabpanel">
<h4 class="card-title">Special active title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="navs-within-card-link" role="tabpanel">
<h4 class="card-title">Special link title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
</div>
</div>
</div>Pills within Card
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">
<div class="card-header border-bottom">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-active" role="tab">Active</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-link" role="tab">Link</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link disabled" data-bs-toggle="tab" data-bs-target="javascript:void(0)" role="tab">Disabled</button>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-pills-within-card-active" role="tabpanel">
<h4 class="card-title">Special active title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="navs-pills-within-card-link" role="tabpanel">
<h4 class="card-title">Special link title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
</div>
</div>
</div>Tabs line within Card
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">
<ul class="nav nav-tabs tabs-line" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#navs-tabs-line-within-card-active" role="tab">Active</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#navs-tabs-line-within-card-link" role="tab">Link</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link disabled" data-bs-toggle="tab" data-bs-target="javascript:void(0)" role="tab">Disabled</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-tabs-line-within-card-active" role="tabpanel">
<h4 class="card-title">Special active title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="navs-tabs-line-within-card-link" role="tabpanel">
<h4 class="card-title">Special link title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
</div>
</div>
</div>