Explore Our Templates 🚀
Tabs
Documentation and examples for how to use Bootstrap’s included navigation tabs components. document
Basic example
Takes the basic nav from above and adds the variant="tabs" props to generate a tabbed interface.
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<ul class="nav nav-light nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_1">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_2">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_1">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_2">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div><template>
<ul class="nav nav-light nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_1">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_2">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_1">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_2">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</template><BTabs content-class="mt-3">
<!-- Active Tab -->
<BTab title="Active" active>
<p>
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
</p>
</BTab>
<!-- Link Tab -->
<BTab title="Link">
<p>
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR
banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever
gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred
you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable
tofu synth chambray yr.
</p>
</BTab>
<!-- Dropdown Tab -->
<template #tabs-end>
<BDropdown
class="nav-item"
variant="link"
toggle-class="nav-link"
text="Dropdown"
>
<BDropdownItem href="#">Action</BDropdownItem>
<BDropdownItem href="#">Another action</BDropdownItem>
<BDropdownItem href="#">Something else here</BDropdownItem>
<BDropdownDivider />
<BDropdownItem href="#">Separated link</BDropdownItem>
</BDropdown>
</template>
<!-- Disabled Tab -->
<BTab title="Disabled" disabled>
<p>This tab is disabled.</p>
</BTab>
</BTabs><ul class="nav nav-light nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_1">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_2">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_1">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_2">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>Nav tab icon
Takes the basic nav from above and adds the .nav-icon class to generate a tabbed interface.
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<ul class="nav nav-tabs nav-icon nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_12">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_22">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_12">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_22">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div><template>
<ul class="nav nav-tabs nav-icon nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_12">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_22">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_12">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_22">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</template><template>
<div>
<BTabs content-class="mt-3">
<!-- Active Tab with Check Circle Icon -->
<BTab active>
<template #title>
<span class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="check-circle"></i>
</span>
</span>
<span class="nav-link-text">Active</span>
</template>
<p>
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
</p>
</BTab>
<!-- Link Tab with File Text Icon -->
<BTab>
<template #title>
<span class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="file-text"></i>
</span>
</span>
<span class="nav-link-text">Link</span>
</template>
<p>
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR
banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever
gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred
you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable
tofu synth chambray yr.
</p>
</BTab>
<!-- Dropdown Tab with Map Icon -->
<template #tabs-end>
<BDropdown class="nav-item" variant="link" toggle-class="nav-link">
<template #button-content>
<span class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="map"></i>
</span>
</span>
<span class="nav-link-text">Dropdown</span>
</template>
<BDropdownItem href="#">Action</BDropdownItem>
<BDropdownItem href="#">Another action</BDropdownItem>
<BDropdownItem href="#">Something else here</BDropdownItem>
<BDropdownDivider />
<BDropdownItem href="#">Separated link</BDropdownItem>
</BDropdown>
</template>
<!-- Disabled Tab with Package Icon -->
<BTab disabled>
<template #title>
<span class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="package"></i>
</span>
</span>
<span class="nav-link-text badge-on-text">Disabled</span>
</template>
<p>This tab is disabled.</p>
</BTab>
</BTabs>
</div>
</template><ul class="nav nav-tabs nav-icon nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_12">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_22">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_12">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_22">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>Nav tab icon vertical
Takes the basic nav from above and adds the .nav-icon .nav-icon-top class to generate a tabbed interface.
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<ul class="nav nav-icon nav-icon-top nav-tabs nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_112">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_212">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_112">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_212">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div><template>
<ul class="nav nav-icon nav-icon-top nav-tabs nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_112">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_212">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_112">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_212">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</template><template>
<div>
<BTabs content-class="mt-3">
<!-- Active Tab with Check Circle Icon -->
<BTab active>
<template #title>
<div class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="check-circle"></i>
</span>
<span class="nav-link-text">Active</span>
</div>
</template>
<p>
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
</p>
</BTab>
<!-- Link Tab with File Text Icon -->
<BTab>
<template #title>
<div class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="file-text"></i>
</span>
<span class="nav-link-text">Link</span>
</div>
</template>
<p>
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR
banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever
gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred
you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable
tofu synth chambray yr.
</p>
</BTab>
<!-- Dropdown Tab with Map Icon -->
<template #tabs-end>
<BDropdown class="nav-item" variant="link" toggle-class="nav-link">
<template #button-content>
<div class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="map"></i>
</span>
<span class="nav-link-text">Dropdown</span>
</div>
</template>
<BDropdownItem href="#">Action</BDropdownItem>
<BDropdownItem href="#">Another action</BDropdownItem>
<BDropdownItem href="#">Something else here</BDropdownItem>
<BDropdownDivider />
<BDropdownItem href="#">Separated link</BDropdownItem>
</BDropdown>
</template>
<!-- Disabled Tab with Package Icon -->
<BTab disabled>
<template #title>
<div class="nav-icon-wrap">
<span class="feather-icon">
<i data-feather="package"></i>
</span>
<span class="nav-link-text badge-on-text">Disabled</span>
</div>
</template>
<p>This tab is disabled.</p>
</BTab>
</BTabs>
</div>
</template><ul class="nav nav-icon nav-icon-top nav-tabs nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_112">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_212">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_112">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_212">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>Nav tab pills
Takes the basic nav from above and adds the variant="pills" props to generate a pill interface.
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<ul class="nav nav-light nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#tab_block_13">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#tab_block_23">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_13">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_23">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div><template>
<ul class="nav nav-light nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#tab_block_13">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#tab_block_23">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_13">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_23">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</template><template>
<div>
<BTabs content-class="mt-3" pills card>
<!-- Active Tab -->
<BTab title="Active" active>
<p>
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
</p>
</BTab>
<!-- Link Tab -->
<BTab title="Link">
<p>
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR
banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever
gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred
you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable
tofu synth chambray yr.
</p>
</BTab>
<!-- Dropdown Tab -->
<template #tabs-end>
<BDropdown
class="nav-item"
variant="link"
toggle-class="nav-link"
text="Dropdown"
>
<BDropdownItem href="#">Action</BDropdownItem>
<BDropdownItem href="#">Another action</BDropdownItem>
<BDropdownItem href="#">Something else here</BDropdownItem>
<BDropdownDivider />
<BDropdownItem href="#">Separated link</BDropdownItem>
</BDropdown>
</template>
<!-- Disabled Tab -->
<BTab title="Disabled" disabled>
<p>This tab is disabled.</p>
</BTab>
</BTabs>
</div>
</template><ul class="nav nav-light nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#tab_block_13">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#tab_block_23">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_13">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_23">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>Nav line tab
Takes the basic nav from above and adds the .nav-line class to generate a tabbed interface.
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<ul class="nav nav-line nav-tabs nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_14">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_24">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_14">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_24">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div><template>
<ul class="nav nav-line nav-tabs nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_14">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_24">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_14">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_24">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</template><template>
<div>
<BTabs content-class="nav-line">
<!-- Active Tab -->
<BTab title="Active" active>
<p>
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
</p>
</BTab>
<!-- Link Tab -->
<BTab title="Link">
<p>
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR
banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever
gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred
you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable
tofu synth chambray yr.
</p>
</BTab>
<!-- Dropdown Tab -->
<template #tabs-end>
<BDropdown
class="nav-item"
variant="link"
toggle-class="nav-link"
text="Dropdown"
>
<BDropdownItem href="#">Action</BDropdownItem>
<BDropdownItem href="#">Another action</BDropdownItem>
<BDropdownItem href="#">Something else here</BDropdownItem>
<BDropdownDivider />
<BDropdownItem href="#">Separated link</BDropdownItem>
</BDropdown>
</template>
<!-- Disabled Tab -->
<BTab title="Disabled" disabled>
<p>This tab is disabled.</p>
</BTab>
</BTabs>
</div>
</template><ul class="nav nav-line nav-tabs nav-light">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_14">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_24">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_14">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_24">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>Segmented tab
Takes the basic nav from above and adds the .nav-tabs .nav-segmented-tabs class to generate a tabbed interface.
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<ul class="nav nav-justified nav-light nav-tabs nav-segmented-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_16">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_26">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_16">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_26">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div><template>
<ul class="nav nav-justified nav-light nav-tabs nav-segmented-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_16">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_26">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_16">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_26">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</template><template>
<div>
<BTabs content-class="nav-justified nav-segmented-tabs">
<!-- Active Tab -->
<BTab title="Active" active>
<p>
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
</p>
</BTab>
<!-- Link Tab -->
<BTab title="Link">
<p>
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR
banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever
gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred
you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable
tofu synth chambray yr.
</p>
</BTab>
<!-- Dropdown Tab -->
<template #tabs-end>
<BDropdown
class="nav-item"
variant="link"
toggle-class="nav-link"
text="Dropdown"
>
<BDropdownItem href="#">Action</BDropdownItem>
<BDropdownItem href="#">Another action</BDropdownItem>
<BDropdownItem href="#">Something else here</BDropdownItem>
<BDropdownDivider />
<BDropdownItem href="#">Separated link</BDropdownItem>
</BDropdown>
</template>
<!-- Disabled Tab -->
<BTab title="Disabled" disabled>
<p>This tab is disabled.</p>
</BTab>
</BTabs>
</div>
</template><ul class="nav nav-justified nav-light nav-tabs nav-segmented-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_16">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_26">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_block_16">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_26">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>Segmented tab type
Takes the basic nav from above and adds the .segmented-tabs-filled or .nav-justified with .nav-segmented-tabs class to generate a tabbed interface.
<ul class="nav nav-justified nav-light nav-tabs nav-segmented-tabs segmented-tabs-filled">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<ul class="nav nav-icon nav-tabs nav-justified nav-segmented-tabs nav-light mt-6">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_12">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_22">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul><template>
<ul class="nav nav-justified nav-light nav-tabs nav-segmented-tabs segmented-tabs-filled">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<ul class="nav nav-icon nav-tabs nav-justified nav-segmented-tabs nav-light mt-6">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_12">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_22">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
</template><template>
<ul class="nav nav-justified nav-light nav-tabs nav-segmented-tabs segmented-tabs-filled">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<ul class="nav nav-icon nav-tabs nav-justified nav-segmented-tabs nav-light mt-6">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_12">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_22">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
</template><ul class="nav nav-justified nav-light nav-tabs nav-segmented-tabs segmented-tabs-filled">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
<ul class="nav nav-icon nav-tabs nav-justified nav-segmented-tabs nav-light mt-6">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_12">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="check-circle"></i></span></span>
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_22">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="file-text"></i></span></span>
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="map"></i></span></span>
<span class="nav-link-text">Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="tab" href="#">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="package"></i></span></span>
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>Vertical tabs
TabContent, and TabPane components along with any style of Nav allow you to quickly piece together your own Tabs component with additional markup needed.
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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<div class="row">
<div class="col-4 col-md-3">
<ul class="nav flex-column nav-light nav-pills nav-vertical">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_15">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_25">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
</div>
<div class="col-8 col-md-9">
<div class="tab-content mt-0">
<div class="tab-pane fade show active" id="tab_block_15">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_25">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</div>
</div><template>
<div class="row">
<div class="col-4 col-md-3">
<ul class="nav flex-column nav-light nav-pills nav-vertical">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_15">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_25">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
</div>
<div class="col-8 col-md-9">
<div class="tab-content mt-0">
<div class="tab-pane fade show active" id="tab_block_15">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_25">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</div>
</div>
</template><BCard no-body>
<BTabs
pills
card
vertical
>
<BTab
title="Tab 1"
active
><BCardText>Tab contents 1</BCardText></BTab
>
<BTab title="Tab 2"><BCardText>Tab contents 2</BCardText></BTab>
<BTab title="Tab 3"><BCardText>Tab contents 3</BCardText></BTab>
</BTabs>
</BCard><div class="row">
<div class="col-4 col-md-3">
<ul class="nav flex-column nav-light nav-pills nav-vertical">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab_block_15">
<span class="nav-link-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab_block_25">
<span class="nav-link-text">Link</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-bs-toggle="pill" href="#">
<span class="nav-link-text badge-on-text">Disabled</span>
</a>
</li>
</ul>
</div>
<div class="col-8 col-md-9">
<div class="tab-content mt-0">
<div class="tab-pane fade show active" id="tab_block_15">
<p>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 farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </p>
</div>
<div class="tab-pane fade" id="tab_block_25">
<p>iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</div>
</div>