Bootstrap 4 Tabs Examples

bootstrap 4 tabs
bootstrap 4 tabs
bootstrap 4 tabs

To create bootstrap 4 tabs just add class .nav-tabs and add the .active class to the current and active tab .

Bootstrap 4 Tabs

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab1">TAB 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab2">TAB 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab3">TAB 3</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <h2>Tab 1 Content</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    </div>
  
    <div class="tab-pane fade" id="tab2">
      <h2>Tab 2 Content</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    </div>
  
    <div class="tab-pane fade" id="tab3">
      <h2>Tab 3 Content</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    </div>
  </div>

Leave a Reply

avatar
  Subscribe  
Notify of