Bootstrap Responsive Tabs is a jQuery plugin which enables Bootstrap tab menus to work well in responsive layouts. When horizontal space is limited, the tab menu will display as many menu items as it can in tabs, and then collapse the remaining menu items into a drop down menu at the end of the tab list.

Desktop View

Mobile View


Mobile View with Dropdown


In order to use the plugin simply include jquery.responsivetabs.js in your code, and attach responsiveTabs() to your tab menu:

<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#yorkminster" aria-controls="home" role="tab" data-toggle="tab">York Minster</a></li>
	<li role="presentation"><a href="#yorkcastle" aria-controls="profile" role="tab" data-toggle="tab">York Castle</a></li>
	<li role="presentation"><a href="#yorkmuseumgardens" aria-controls="profile" role="tab" data-toggle="tab">York Museum Gardens</a></li>
	<li role="presentation"><a href="#yorkdungeon" aria-controls="profile" role="tab" data-toggle="tab">York Dungeon</a></li>
	<li role="presentation"><a href="#theshambles" aria-controls="profile" role="tab" data-toggle="tab">The Shambles</a></li>
<script src=""></script>
$(function() {

NPM Install

npm install responsive-bootstrap-tabs


Tested with Bootstrap 3.3.7 and jQuery 2.2.4

“ Invent Partners supported my cycling event with a stylish website, intuitive CMS and flexible and responsive ecommerce system. Thanks to their hard work and patience, my event sold out in hours, with riders praising the easy to use event entry system and customer service. Many thanks! ”
Danial, London Edinburgh London

Contact Us

© 2024 Invent Partners Ltd | Supporters of FdA Web Design, Wakefield