Bootstrap Responsive Tabs is a jQuery plugin to make Bootstrap tabs more responsive and mobile friendly.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo Fix lorem text generator Jun 30, 2015
dist
LICENSE Add License Jul 24, 2014
README.md Update README Jan 12, 2015
bower.json

README.md

Bootstrap Responsive Tabs

Bootstrap Responsive Tabs is a jQuery plugin to make Bootstrap tabs more responsive and mobile friendly.

Demo

View the demo

Requirements

  • Bootstrap: 3+
  • jQuery: 1.9+

Installation

Bootstrap Responsive Tabs is available on Bower:

bower install bootstrap-responsive-tabs

Usage

The JS:

$(".js-tabs-example").bootstrapResponsiveTabs({
    minTabWidth: "100",
    maxTabWidth: "200"
});

The HTML:

<ul class="nav nav-tabs js-tabs-example">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
  <li><a href="#tab4" data-toggle="tab">Tab4</a></li>
  <li><a href="#tab5" data-toggle="tab">Tab5</a></li>
</ul>

Options

A tab can have minimum and maximum width, when the screen stretches more than 480px.

minTabWidth: The minimum width of each tab.

maxTabWidth: The maximum width of each tab.

Credits

Many thanks for Dylan Robinson for help with creating a debouncing function when resizing the tabs.

License

The Bootstrap Responsive Tabs plugin is licensed under the MIT license. See the LICENSE file for full details.