Documentation

Browse source code
On this page

Tabs

Bootstrap documentation

Default markup

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-toggle="tabs">
    <li class="nav-item">
      <a href="#tabs-home-ex1" class="nav-link active" data-toggle="tab">Home</a>
    </li>
    <li class="nav-item">
      <a href="#tabs-profile-ex1" class="nav-link" data-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

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-toggle="tabs">
    <li class="nav-item">
      <a href="#tabs-home-ex2" class="nav-link active" data-toggle="tab"><!-- SVG icon code -->
        Home</a>
    </li>
    <li class="nav-item">
      <a href="#tabs-profile-ex2" class="nav-link" data-toggle="tab"><!-- SVG icon code -->
        Profile</a>
    </li>
    <li class="nav-item ml-auto">
      <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-toggle="tab"><!-- 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

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-toggle="tabs">
    <li class="nav-item">
      <a href="#tabs-home-ex3" class="nav-link active" data-toggle="tab"><!-- SVG icon code -->
      </a>
    </li>
    <li class="nav-item">
      <a href="#tabs-profile-ex3" class="nav-link" data-toggle="tab"><!-- SVG icon code -->
      </a>
    </li>
    <li class="nav-item ml-auto">
      <a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-toggle="tab"><!-- 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

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-toggle="tabs">
    <li class="nav-item">
      <a href="#tabs-home-ex4" class="nav-link active" data-toggle="tab">Home</a>
    </li>
    <li class="nav-item">
      <a href="#tabs-profile-ex4" class="nav-link" data-toggle="tab">Profile</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-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>
      </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

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-toggle="tabs">
    <li class="nav-item">
      <a href="#tabs-home-ex5" class="nav-link active" data-toggle="tab"><!-- SVG icon code -->
      </a>
    </li>
    <li class="nav-item">
      <a href="#tabs-profile-ex5" class="nav-link" data-toggle="tab"><!-- SVG icon code -->
      </a>
    </li>
    <li class="nav-item">
      <a href="#tabs-activity-ex5" class="nav-link" data-toggle="tab"><!-- 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

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-toggle="tabs">
    <li class="nav-item">
      <a href="#tabs-home-ex6" class="nav-link active" data-toggle="tab"><!-- SVG icon code -->
        Home</a>
    </li>
    <li class="nav-item">
      <a href="#tabs-profile-ex6" class="nav-link" data-toggle="tab"><!-- SVG icon code -->
        Profile</a>
    </li>
    <li class="nav-item ml-auto">
      <a href="#tabs-settings-ex6" class="nav-link" title="Settings" data-toggle="tab"><!-- 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>