Bootstrap Responsive Tabs

By Invent Partners [https://inventpartners.com]

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.

---

🚀 Now with Bootstrap 5 & Pure Vanilla JavaScript Support 🎉

You can now use responsive tabs in three different ways:

Version	Bootstrap CSS	Bootstrap JS	jQuery	Status
Bootstrap 3	✅ Yes	✅ Yes	✅ Yes	Supported
Bootstrap 4	✅ Yes	✅ Yes	✅ Yes	Supported
Bootstrap 5	✅ Yes	✅ Yes	❌ No	Supported
✅ Bootstrap 5 (CSS only, pure JavaScript)	✅ Yes	❌ No	❌ No	NEW – Supported

---

✅ New: Vanilla JavaScript (No jQuery, No Bootstrap.js)

This version was added based on community request:

"I want responsive tabs but without using bootstrap.js – only plain JavaScript. Is this possible?"
✅ Yes – now supported.

📁 File Structure

/bootstrap3 → Bootstrap 3 + jQuery version
/bootstrap4 → Bootstrap 4 + jQuery version
/bootstrap5 → Bootstrap 5 (with Bootstrap JS)
/vanilla-js → ✅ Bootstrap 5 CSS only + Pure JavaScript (no jQuery, no Bootstrap JS)

---

✅ Features (Vanilla JS Version)

✔ 100% Pure JavaScript (No jQuery, No Bootstrap.js)
✔ Automatically moves extra tabs into a “More” dropdown when screen is small
✔ Works with Bootstrap 5 CSS only
✔ Mobile-friendly: supports click + touch events
✔ Dropdown tab click auto-activates correct content
✔ Accessible and easy to customize

---

LICENSE

Copyright 2016 Invent Partners http://www.inventpartners.com

Licensed under an MIT style license

http://www.inventpartners.com/mit-license

Demo

Check out the demos: Bootstrap 3 / Bootstrap 4 / Bootstrap 5 / Vanilla JS.

Requirements

Bootstrap 3 or 4:

Bootstrap Responsive Tabs requires Bootstrap (CSS and JavaScript) and jQuery.

Please note that Bootstrap 4 users should use the files in the /bootstrap4 folder.

Bootstrap 5:

Uses Bootstrap 5 and Vanilla JS. No jQuery required.

Please note that Bootstrap 4 users should use the files in the /bootstrap4 folder and Bootstrap 5 users should use the files in the /bootstrap5 folder.

Usage (Bootstrap 3 or 4)

$(function(){$('.nav-tabs').responsiveTabs();});

More details here: [http://www.inventpartners.com/open-source/bootstrap-responsive-tabs]