Documentation
Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
Default markup
Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
<div class="card">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex1" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex1" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex1">
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex1">
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
</div>
</div>
</div>Tabs with icons
Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify.
Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
<div class="card">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<!-- SVG icon code with class="me-2" -->
Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
<!-- SVG icon code with class="me-2" -->
Profile</a>
</li>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
<!-- SVG icon code -->
</a>
</li>
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex2">
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex2">
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
<div class="tab-pane" id="tabs-settings-ex2">
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
</div>
</div>
</div>Tabs only with icons
Use tabs without label names to save space and make the tab content easy to recognize for international users.
Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
<div class="card">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex3" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<!-- SVG icon code -->
</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex3" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
<!-- SVG icon code -->
</a>
</li>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
<!-- SVG icon code -->
</a>
</li>
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex3">
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex3">
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
<div class="tab-pane" id="tabs-settings-ex3">
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
</div>
</div>
</div>Tabs with dropdown
Make one or more of your tabs into a dropdown to add more options within one element.
Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
<div class="card">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex4" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex4" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" 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>
</div>
</li>
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex4">
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex4">
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
</div>
</div>
</div>Full-width tabs
Add the nav-fill class to make the tabs take up the full space of the parent element.
Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
<div class="card">
<ul class="nav nav-tabs nav-fill" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex5" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<!-- SVG icon code -->
</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex5" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
<!-- SVG icon code -->
</a>
</li>
<li class="nav-item">
<a href="#tabs-activity-ex5" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/activity -->
<!-- SVG icon code -->
</a>
</li>
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex5">
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex5">
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
<div class="tab-pane" id="tabs-activity-ex5">
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
</div>
</div>
</div>Alternate style
Use the nav-tabs-alt class to make the labels display in capital letters.
Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
<div class="card">
<ul class="nav nav-tabs nav-tabs-alt" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex6" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<!-- SVG icon code with class="me-2" -->
Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex6" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
<!-- SVG icon code with class="me-2" -->
Profile</a>
</li>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex6" class="nav-link" title="Settings" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
<!-- SVG icon code -->
</a>
</li>
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-ex6">
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class="tab-pane" id="tabs-profile-ex6">
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
<div class="tab-pane" id="tabs-settings-ex6">
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
</div>
</div>
</div>