Tabs are useful for grouping similar content on the same page so wthat users can quickly navigate between different sections of similar/related content. Here are a few recommendations for best practices:

Content: Each tab label must be concise and use minimal words, keep in mind in mobile view with lenght words will impact the experience.
Number of Tabs :A maximum of 6 tabs may be display unless fall in a strict circumstances. This way it won’t clutter the UI of the site.

Tabs | Basic Sass file: /_scss/components/tab.scss

Home

Consectetur adipiscing elit. Nunc euismod arcu eget iaculis tristique. Vestibulum interdum, lorem ac consectetur efficitur, arcu elit mattis erat, sed pretium est ligula a turpis. Morbi mollis, orci vitae varius porta,lectus arcu varius neque, ultrices tempus est augue sit amet dui. Proin facilisis tincidunt dolor,eget pulvinar massa tincidunt et. Mauris tristique gravida lacus ac iaculis.

Profile

Consectetur adipiscing elit. Nunc euismod arcu eget iaculis tristique. Vestibulum interdum, lorem ac consectetur efficitur, arcu elit mattis erat, sed pretium est ligula a turpis. Morbi mollis, orci vitae varius porta, lectus arcu varius neque, ultrices tempus est augue sit amet dui. Proin facilisis tincidunt dolor, eget pulvinar massa tincidunt et. Mauris tristique gravida lacus ac iaculis.

Messages

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod arcu eget iaculis tristique. Vestibulum interdum, lorem ac consectetur efficitur, arcu elit mattis erat, sed pretium est ligula a turpis. Morbi mollis, orci vitae varius porta, lectus arcu varius neque, ultrices tempus est augue sit amet dui. Proin facilisis tincidunt dolor, eget pulvinar massa tincidunt et. Mauris tristique gravida lacus ac iaculis.

Settings

Vestibulum interdum, lorem ac consectetur efficitur, arcu elit mattis erat, sed pretium est ligula a turpis. Morbi mollis, orci vitae varius porta, lectus arcu varius neque, ultrices tempus est augue sit amet dui. Proin facilisis tincidunt dolor, eget pulvinar massa tincidunt et. Mauris tristique gravida lacus ac iaculis.


          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
          <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
          <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
          </ul>
  
          <!-- Tab panes -->
          <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">...</div>
          <div role="tabpanel" class="tab-pane" id="profile">...</div>
          <div role="tabpanel" class="tab-pane" id="messages">...</div>
          <div role="tabpanel" class="tab-pane" id="settings">...</div>
          </div>