Tabs
Bootstrap provides several options for tabs that work relatively well out-of-the-box. We offer a couple of shortcuts to make it easier.
For responsive tabs, add .device-{x}, (x equals the breakpoint
size
hook, e.g. md) to .nav. The tabs will stack on mobile devices. If the
variable $enable-rounded is true globally, .nav-item
and
.tab-content are rounded appropriately.
Nav Pills
In the example below, .flex-fill is present on .nav-item, for
evenly distributed widths. Container background colors are set inline, while the active
state styles of .nav-item are inherited globally from
$component-active-bg, and $component-active-color.
Tab One Content
Mus malesuada dapibus ac condimentum habitasse a praesent commodo penatibus parturient duis pretium et dolor parturient cum. Est vehicula facilisis ad proin condimentum pretium augue accumsan sapien potenti non vestibulum aptent non cum ullamcorper fusce tincidunt class scelerisque facilisi mi dictumst porttitor est volutpat parturient scelerisque.
Tab Two Content
Mus malesuada dapibus ac condimentum habitasse a praesent commodo penatibus parturient duis pretium et dolor parturient cum. Est vehicula facilisis ad proin condimentum pretium augue accumsan sapien potenti non vestibulum aptent non cum ullamcorper fusce tincidunt class scelerisque facilisi mi dictumst porttitor est volutpat parturient scelerisque.
Tab Three Content
Mus malesuada dapibus ac condimentum habitasse a praesent commodo penatibus parturient duis pretium et dolor parturient cum. Est vehicula facilisis ad proin condimentum pretium augue accumsan sapien potenti non vestibulum aptent non cum ullamcorper fusce tincidunt class scelerisque facilisi mi dictumst porttitor est volutpat parturient scelerisque.
<div class="nav nav-pills bg-light device-md" role="tablist">
<a class="nav-item nav-link flex-fill active" id="tab-btn-01-a" href="#tab-01-a"
data-toggle="pill" aria-controls="tab-01-a" aria-selected="true" role="tab">
Tab One
</a>
<a class="nav-item nav-link flex-fill" id="tab-btn-01-b" href="#tab-01-b"
data-toggle="pill" aria-controls="tab-01-b" aria-selected="false" role="tab">
Tab Two
</a>
<a class="nav-item nav-link flex-fill" id="tab-btn-01-c" href="#tab-01-c"
data-toggle="pill" aria-controls="tab-01-c" aria-selected="false" role="tab">
Tab Three
</a>
</div>
<div class="tab-content bg-info text-white p-2" id="tabs-01-content">
<div class="tab-pane fade show active" id="tab-01-a" aria-labelledby="tab-btn-01-a" role="tabpanel">
<p>Tab One Content</p>
</div>
<div class="tab-pane fade" id="tab-01-b" aria-labelledby="tab-btn-01-b" role="tabpanel">
<p>Tab Two Content</p>
</div>
<div class="tab-pane fade" id="tab-01-c" aria-labelledby="tab-btn-01-c" role="tabpanel">
<p>Tab Three Content</p>
</div>
</div>
Nav Tabs
For more traditional tabs, consider using .nav-tabs:
Tab One Content
Tab Two Content
Tab Three Content
<div class="nav nav-tabs device-md mb-3" role="tablist">
<a class="nav-item nav-link active" id="tab-btn-02-a" href="#tab-02-a" data-toggle="tab"
aria-controls="tab-02-a" aria-selected="true" role="tab">
Tab One
</a>
<a class="nav-item nav-link" id="tab-btn-02-b" href="#tab-02-b" data-toggle="tab"
aria-controls="tab-02-b" aria-selected="false" role="tab">
Tab Two
</a>
<a class="nav-item nav-link" id="tab-btn-02-c" href="#tab-02-c" data-toggle="tab"
aria-controls="tab-02-c" aria-selected="false" role="tab">
Tab Three
</a>
</div>
<div class="tab-content" id="tabs-02-content">
<div class="tab-pane fade show active" id="tab-02-a" aria-labelledby="tab-btn-02-a"
role="tabpanel">
<p>Tab One Content</p>
</div>
<div class="tab-pane fade" id="tab-02-b" aria-labelledby="tab-btn-02-b" role="tabpanel">
<p>Tab Two Content</p>
</div>
<div class="tab-pane fade" id="tab-02-c" aria-labelledby="tab-btn-02-c" role="tabpanel">
<p>Tab Three Content</p>
</div>
</div>
Tabs can be customized in scss/_f-layout-elements.scss under K. Tabs.