<ul>, <li>, .nav, .nav-item, .nav-link でナビゲーション部品を構成します。

<ul class="nav">
  <li class="nav-item"><a href="#" class="nav-link">Item#1</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#2</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#3</a></li>
</ul>

<ul>, <li> の代わりに <nav>, <a> を使用することも可能です。

<nav class="nav">
  <a href="#" class="nav-link">Link#1</a>
  <a href="#" class="nav-link">Link#2</a>
  <a href="#" class="nav-link">Link#3</a>
</nav>

.nav-tab はタブを表示します。

<ul class="nav nav-tabs">
  <li class="nav-item"><a href="#" class="nav-link active">Item#1</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#2</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#3</a></li>
</ul>

data-toggle="tab", href="#...", .tab-content, .tab-pane と組み合わせて、下記の様にタブによって表示する内容を切り替えることができます。

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="item1-tab" data-toggle="tab" href="#item1" role="tab" aria-controls="item1" aria-selected="true">Item#1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="item2-tab" data-toggle="tab" href="#item2" role="tab" aria-controls="item2" aria-selected="false">Item#2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="item3-tab" data-toggle="tab" href="#item3" role="tab" aria-controls="item3" aria-selected="false">Item#3</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="item1" role="tabpanel" aria-labelledby="item1-tab">This is a text of item#1.</div>
  <div class="tab-pane fade" id="item2" role="tabpanel" aria-labelledby="item2-tab">This is a text of item#2.</div>
  <div class="tab-pane fade" id="item3" role="tabpanel" aria-labelledby="item3-tab">This is a text of item#3.</div>
</div>

.justify-content-start, .justify-content-center, .justify-content-end はナビゲーションを左端、中央、右端に表示します。

<ul class="nav nav-tabs justify-content-start">...</ul>
<ul class="nav nav-tabs justify-content-center">...</ul>
<ul class="nav nav-tabs justify-content-end">...</ul>

.nav-fill はナビゲーションを横幅一杯に表示します。.nav-justified も横幅一杯に表示しますが、内容によって横幅を調整します。

<ul class="nav nav-tabs nav-fill">...</ul>
<ul class="nav nav-tabs nav-justified">...</ul>

.flex-column はナビゲーションを縦方向に表示します。

<ul class="nav flex-column">...</ul>

.nav-pills を指定するとアクティブなタブを塗りつぶします。

<ul class="nav nav-pills">