Footer nav

Adds a tabbed interface to the card bottom for switching between sub-views or data points.

Pills

Card title

Example text

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div>
  <div class="card-footer">
    <ul class="nav nav-pills card-footer-pills">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
</div>

Tabs

Card title

Example text

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div>
  <div class="card-footer">
    <ul class="nav nav-tabs card-footer-tabs nav-tabs-bottom">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
</div>