PHPackages kartik-v/bootstrap-tabs-x - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. kartik-v/bootstrap-tabs-x ActiveLibrary[Utility & Helpers](/categories/utility) kartik-v/bootstrap-tabs-x ========================= Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more. v1.3.5(4y ago)1021.3M↓10.7%321BSD-3-Clause Since Aug 12Pushed 4y ago10 watchersCompare [ Source](https://github.com/kartik-v/bootstrap-tabs-x)[ Packagist](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)[ Docs](https://github.com/kartik-v/bootstrap-tabs-x)[ RSS](/packages/kartik-v-bootstrap-tabs-x/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (9)DependenciesVersions (10)Used By (1) [ ![Krajee Logo](https://camo.githubusercontent.com/4addfbb3869c3fc7d79befea4f06d9cf3655a686fb503df0da1d725859cfdef9/687474703a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f6b72616a65652d6c6f676f2d622e706e67) ](http://plugins.krajee.com "Krajee Plugins") bootstrap-tabs-x --- [![Donate](https://camo.githubusercontent.com/0336bc43d88554a3f2d6c74dddf312bc2c65c2eacca70d83ae40f5567098d00e/68747470733a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f646f6e6174652e706e67)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU "Donate via Paypal") [![kartikv](https://camo.githubusercontent.com/0cf29a542375e1a46e84d8bf5805a4e5c0a6ee98b6547ccdc0c55eed49d99c69/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f76322f64656661756c742d79656c6c6f772e706e67)](https://www.buymeacoffee.com/kartikv "Buy me a coffee") ======================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================= [](#------------------------bootstrap-tabs-x------------------) [![Bower version](https://camo.githubusercontent.com/a3fb6091b91bbab40bea5842bda7248c9776f9d3705a829eceeee083cae3724a/68747470733a2f2f62616467652e667572792e696f2f626f2f626f6f7473747261702d746162732d782e737667)](http://badge.fury.io/bo/bootstrap-tabs-x)[![Latest Stable Version](https://camo.githubusercontent.com/9c60f0517b5a9a78aff24318f174a219ef604510c4fe0964c5a4e53ae55fae46/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d746162732d782f762f737461626c65)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)[![License](https://camo.githubusercontent.com/a64691be9e1d02ff39d29828995826e58f69c95e7422bd2c3f5b455b9d67c5ce/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d746162732d782f6c6963656e7365)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)[![Packagist Downloads](https://camo.githubusercontent.com/ade8b61933d3fd0cf60caf2ada995fbe36966e3675befdd6bfee0e1d2ac5ddb1/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d746162732d782f646f776e6c6f616473)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)[![Monthly Downloads](https://camo.githubusercontent.com/284633b541a1f5870bb8f208c8408f155f0727b28cb3c70e055aff048627b7f5/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d746162732d782f642f6d6f6e74686c79)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x) Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, load tab content via ajax including caching, and more. This plugin includes various CSS3 styling enhancements and various tweaks to the core [Bootstrap Tabs plugin](http://getbootstrap.com/javascript/#tabs). [![Bootstrap Tabs X Screenshot](https://camo.githubusercontent.com/11e1cb28fa0663b06e15f81d42fc04b2476a09dbb14f5c8409d34dc3ceede5da/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f2d765744352d36586f5970342f55397a6d797342666245492f4141414141414141414c6f2f2d486b62652d594142366b2f773637382d683535312d6e6f2f626f6f7473747261702d746162732d782e6a7067)](https://camo.githubusercontent.com/11e1cb28fa0663b06e15f81d42fc04b2476a09dbb14f5c8409d34dc3ceede5da/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f2d765744352d36586f5970342f55397a6d797342666245492f4141414141414141414c6f2f2d486b62652d594142366b2f773637382d683535312d6e6f2f626f6f7473747261702d746162732d782e6a7067) Features -------- [](#features) The plugin offers these enhanced features: - Supports all Bootstrap library releases from v5.x, v4.x and v3.x. - Supports various tab opening directions: `above` (default), `below`, `right`, and `left`. - Allows you to box the tab content in a new `bordered` style. This can work with any of the tab directions above. - Allows you to align the entire tab content to the `left` (default), `center`, or `right` of the parent container/page. - Automatically align & format heights and widths for bordered tabs for `right` and `left` positions. - Allows a rotated `sideways` tab header orientation for the `right` and `left` tab directions. - Auto detect overflowing header labels for `sideways` orientation (with ellipsis styling) and display full label as a title on hover. - Ability to load tab content via ajax call. - With release v1.3.0, you can use this like an enhanced jQuery plugin using the function `$fn.tabsX` on the `.tabs-x` parent element. Demo ---- [](#demo) View the [plugin documentation](http://plugins.krajee.com/tabs-x) and [plugin demos](http://plugins.krajee.com/tabs-x/demo) at Krajee JQuery plugins. Pre-requisites -------------- [](#pre-requisites) 1. [Bootstrap 5.x or 4.x or 3.x](http://getbootstrap.com/) (Requires bootstrap `tabs.js`) 2. Latest [JQuery](http://jquery.com/) 3. Most browsers supporting CSS3 & JQuery. Installation ------------ [](#installation) ### Using Bower [](#using-bower) You can use the `bower` package manager to install. Run: ``` bower install bootstrap-tabs-x ``` ### Using Composer [](#using-composer) You can use the `composer` package manager to install. Either run: ``` $ php composer.phar require kartik-v/bootstrap-tabs-x "@dev" ``` or add: ``` "kartik-v/bootstrap-tabs-x": "@dev" ``` to your composer.json file ### Manual Install [](#manual-install) You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/bootstrap-tabs-x/zipball/master) or [TAR ball](https://github.com/kartik-v/bootstrap-tabs-x/tarball/master) and extract the plugin assets (css and js folders) into your project. Usage ----- [](#usage) ### Load Client Assets [](#load-client-assets) You must first load the following assets in your header. ``` ``` If you noticed, you need to load the `bootstrap.min.css`, `jquery.min.js`, and `bootstrap.min.js` in addition to the `bootstrap-tabs-x.css` and `bootstrap-tabs-x.js` for the plugin to work with default settings. > Note: The plugin extends the **bootstrap tabs plugin** and hence the `bootstrap.min.js` must be loaded before `bootstrap-tabs-x.js`. ### Markup [](#markup) You just need to setup the markup for the extended bootstrap tabs to work now. Refer documentation for details. #### Bootstrap 5.x [](#bootstrap-5x) ``` Tabs Above Centered (Bordered) Home Profile Dropdown Dropdown 1 Dropdown 2 ... ... ... ... ``` #### Bootstrap 4.x [](#bootstrap-4x) ``` Tabs Above Centered (Bordered) Home Profile Dropdown Dropdown 1 Dropdown 2 ... ... ... ... ``` #### Bootstrap 3.x [](#bootstrap-3x) ``` Tabs Above Centered (Bordered) Home Profile Dropdown Dropdown 1 Dropdown 1 ... ... ... ... ... ``` ### Via Javascript [](#via-javascript) The javascript methods and events available in the core bootstrap tabs plugin will be available here as well. Note as in the earlier markup methods, the `tabsX` plugin function behavior is auto-initialized if you set the CSS class `tabs-x` on a container element on the page (e.g. `div`). You can optionally enable tabsX behavior manually via javascript, by not assigning the `tabsX` class on your container. For example if your markup is like below: ``` ... ... ``` You can enable the tabsX plugin via javascript like below: ``` $("#tabs-container").tabsX({ enableCache: true, maxTitleLength: 10 }); ``` Documentation ------------- [](#documentation) View the [plugin documentation at Krajee plugins](http://plugins.krajee.com/tabs-x). License ------- [](#license) **bootstrap-tabs-x** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details. ### Health Score 45 — FairBetter than 93% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity55 Moderate usage in the ecosystem Community18 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~324 days Recently: every ~571 days Total 9 Last Release 1701d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3592619?v=4)[Kartik Visweswaran](/maintainers/kartik-v)[@kartik-v](https://github.com/kartik-v) --- Top Contributors [![kartik-v](https://avatars.githubusercontent.com/u/3592619?v=4)](https://github.com/kartik-v "kartik-v (51 commits)") --- Tags jquerybootstrapextendedmodaltabstabs-xmodal-tabs ### Embed Badge ![Health badge](/badges/kartik-v-bootstrap-tabs-x/health.svg) ``` [![Health](https://phpackages.com/badges/kartik-v-bootstrap-tabs-x/health.svg)](https://phpackages.com/packages/kartik-v-bootstrap-tabs-x) ``` ### Alternatives [kartik-v/yii2-tabs-x A supercharged Bootstrap tabs widget with ability to align tabs in multiple ways, add borders, rotated titles, and more. 301.4M20](/packages/kartik-v-yii2-tabs-x)[kartik-v/bootstrap-popover-x Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. 1143.4M3](/packages/kartik-v-bootstrap-popover-x)[snapappointments/bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. 9.8k480.4k3](/packages/snapappointments-bootstrap-select)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[kartik-v/yii2-editable An enhanced editable widget for Yii 2.0 that allows easy editing of displayed data with numerous configuration possibilities. 1163.2M59](/packages/kartik-v-yii2-editable)[kartik-v/yii2-dialog An asset bundle for bootstrap3-dialog for Yii 2.0 framework. 496.2M18](/packages/kartik-v-yii2-dialog) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)