Tabs

Documentation and examples for how to use Bootstrap’s included navigation components. Read Bootstrap documentation

nav
	.nav.nav-tabs.mb-3(role="tablist")
		a.nav-item.nav-link.active(id="nav-tab-3" data-toggle="tab" href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="true")
			| First tab
		a.nav-item.nav-link(id="nav-tab-4" data-toggle="tab" href="#tab-4" role="tab" aria-controls="tab-4" aria-selected="true")
			| Second tab
	.tab-content
		.tab-pane.fade.bg-gray.p-4.rounded.active.show(id="tab-3" role="tabpanel" aria-labelledby="nav-tab-3")
			| First tab content
		.tab-pane.fade.bg-gray.p-4.rounded(id="tab-4" role="tabpanel" aria-labelledby="nav-tab-4")
			| Second tab content

<nav>
	<div class="nav nav-tabs mb-3" role="tablist">
		<a class="nav-item nav-link active" id="nav-tab-3" data-toggle="tab" href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="true">
			First tab
		</a>
		<a class="nav-item nav-link" id="nav-tab-4" data-toggle="tab" href="#tab-4" role="tab" aria-controls="tab-4" aria-selected="true">
			Second tab
		</a>
	</div>
	<div class="tab-content">
		<div class="tab-pane fade bg-gray p-4 rounded active show" id="tab-3" role="tabpanel" aria-labelledby="nav-tab-3">
			First tab content
		</div>
		<div class="tab-pane fade bg-gray p-4 rounded" id="tab-4" role="tabpanel" aria-labelledby="nav-tab-4">
			Second tab content
		</div>
	</div>
</nav>

Visit Bootstrap documentation to learn more about this component

Version 2.0.0, [email protected]