jQuery Plugin For Responsive Bootstrap Tabs - responsive-tab

responsive-tab is a jQuery plugin that make your Bootstrap tabs responsive by collapsing overflowed items into a dropdown list when there's not enough space available (e.g. in mobile view).

How to use it:

1. Include the jQuery responsive-tab plugin into your webpage. Make sure you first have jQuery library and Bootstrap framework installed.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="responsive-tab.js"></script>

2. Create a responsive Bootstrap tabs component following the markup structure like this:

<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>
  <li>
    <a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1" aria-expanded="true">@fat</a>
  </li>
  <li>
    <a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
  </li>
  <li role="presentation" class="dropdown">
   <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="true">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
    </ul>
  </li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    <p>Tab 1</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <p>Tab 2</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="messages">
    <p>Tab 3</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="settings">
    <p>Tab 4</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
    <p>Tab 5</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
    <p>Tab 6</p>
  </div>
</div>

3. That's it. Resize the window and you'll see the magic.

---

This awesome jQuery plugin is developed by irahulsingh. For more Advanced Usages, please check the demo page or visit the official website.