Molto spesso le pagine web devono mostrare molti dati e metterli tutti insieme può risultare in una scarsa leggibilità della pagina. In questi casi una delle tecniche più ricorrenti per organizzare i dati è quella di usare i tab. Bootstrap ci permette di creare una struttura a tab con pochissimo codice e soprattutto senza dover scrivere una riga di codice JavaScript in quanto il codice necessario è contenuto nel suo file JavaScript. Nel prossimo esempio vediamo come creare una pagina con due tab.

<div role="tabpanel">
  <!-- Tab -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#tab1" role="tab" data-toggle="tab">Tab1</a>
    </li>
    <li role="presentation">
      <a href="#tab2" role="tab" data-toggle="tab">Tab2</a>
    </li>
  </ul>

  <!-- Contenuto tab -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab1">...<div>
    <div role="tabpanel" class="tab-pane" id="tab2">...</div>
  </div>
</div>

Come si vede dallo script, la struttura è composta da un tag "div" principale che contiene prima un tag "ul" all'interno del quale specifichiamo i tab, e poi un tag "div" all'interno del quale specifichiamo un "div" per il contenuto di ogni tab. Per mostrare il "div" collegato al tab, la proprietà "id" del "div" deve corrispondere alla proprietà "href" del tag "a" presente nel tab.