Tabs & Pills | Bootstrap

Tabs

Tabbed and pill navigation with switchable content

Tabs and pills organize content into switchable panels. Bootstrap provides several nav styles to fit different layouts.

Use .nav-tabs on a nav element to create tabbed navigation. The active tab gets an underline and connects visually to its content panel below.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Settings</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active">...</div>
</div>

Home tab content. This is the default active tab.

.nav-tabs with underline on the active item

30 / 37