Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, load tab content via ajax, and more. This plugin includes various CSS3 styling enhancements and various tweaks to the core Bootstrap 4.x/3.x Tabs plugin. View a complete demo.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
The plugin offers these enhanced features:
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.
Latest JQuery
Bootstrap 3.x Tabs Plugin or Bootstrap 4.x Tabs Plugin depending on your bootstrap version loaded
Most modern browsers supporting CSS3, HTML5 inputs, & JQuery. For Internet Explorer, one must use IE versions 9 and above to render the rating.
Bootstrap CSS (use bootstrap versions 3.x or 4.x depending on your JS version loaded in step 2).
The bootstrap-tabs-x plugin can be installed automatically or manually using one of these options:
Installation via bower package manager is as simple as running:
$ bower install bootstrap-tabs-x
The plugin supports both Bootstrap 3.x and Bootstrap 4.x frameworks. The markup to be set for Bootstrap 3.x and Bootstrap 4.x is different and described later.
<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!-- bootstrap 4.x requires bootstrap-tabs-x-bs4.css, while bootstrap 3.x requires bootstrap-tabs-x.css -->
<link href="path/to/css/bootstrap-tabs-x-bs4.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js
3.3.x versions without popper.min.js. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<script src="path/to/js/bootstrap-tabs-x.js" type="text/javascript"></script>
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-bs4.css and bootstrap-tabs-x.js.
A plain html markup is all that you need to initialize the tabs-x plugin. The markup needs to be consistent with Bootstrap 3.x tabs styling for the extended bootstrap tabs to work. Note that you
need to load the bootstrap-popover-x.css on your page for bootstrap 3.x styling.
<!-- BOOTSTRAP 3 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" 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" class="dropdown">
<a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Dropdown 1</a></li>
<li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Dropdown 1</a></li>
</ul>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
</div>
</div>
A plain html markup is all that you need to initialize the tabs-x plugin. The markup needs to be consistent with Bootstrap 4.x tabs styling for the extended bootstrap tabs to work. Note that you need to load the bootstrap-popover-x-bs4.css on your page for bootstrap 4.x styling.
<!-- BOOTSTRAP 4 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
<!-- tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">Dropdown 1</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">Dropdown 2</a>
</div>
</li>
</ul>
<!-- tab panes -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
</div>
</div>
You can also manage the plugin via javascript. The javascript methods and events available in the core bootstrap tabs plugin will be available here as well. Refer the Bootstrap 4 Tabs plugin or Bootstrap 3 Tabs plugin for details.
For advanced cases where you do not wish to add tabs-x CSS class to the tab container markup, then, you may want to initialize the tabs-X plugin manually via javascript as shown below:
For example if your markup is like below:
<div id="tabs-container" class="align-center">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
You can then enable the tabsX plugin for the above container via javascript like below:
$("#tabs-container).tabsX({
enableCache: true,
maxTitleLength: 10
});
As mentioned earlier, the entire tabs behavior can in most cases be controlled through HTML markup. It uses functionality from bootstrap tabs by default based on the markup. In addition, the tabsX plugin related functionality can be enabled via javascript OR via HTML markup. To enable tabs-X functionality via HTML markup just add the CSS class tabs-x to your main div container.
The various tabsX plugin options that can be set (via data attributes within html markup OR via javascript) are:
boolean, whether to enable caching of ajax generated tab pane content. Defaults to true.
integer, timeout in milli-seconds after which cache will be refreshed. Defaults to 300000 (i.e. 5 minutes).
integer, the maximum length of characters in each tab pane title. Text overflowing beyond this limit will be hidden with an ellipsis (and displayed on mouse hover of the tab title). Defaults to 9.
object, the additional ajax options that you wish to send when submitting an ajax response and is applicable only for ajax tabs.
object, the callback function settings (only for ajax tabs) that will be triggered after successful rendering of the ajax content in the ajax tabs. You must set this as an associative array of key value pairs, where each key points to the tab pane identifier. For example if your tabs markup is setup as:
<div id="tabs-container" class="align-center">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane-1" data-toggle="tab" data-url="/site/loadTab.php?1">One</a></li>
<li><a href="#pane-2" data-toggle="tab" data-url="/site/loadTab.php?2">Two</a></li>
<li><a href="#pane-3" data-toggle="tab" data-url="/site/loadTab.php?3">Three</a></li>
</ul>
</div>
You can then setup a successCallback for each tab pane this way:
$("#tabs-container).tabsX({
enableCache: true,
maxTitleLength: 10,
successCallback: {
'pane-1': function (data, status, jqXHR) {
// callback code
},
'pane-2': function (data, status, jqXHR) {
// callback code
},
'pane-3': function (data, status, jqXHR) {
// callback code
}
}
});
object, the callback function settings (only for ajax tabs) that will be triggered after an error in rendering of the ajax content in the ajax tabs. You must set this as an associative array of key value pairs, where each key points to the tab pane identifier. For example if your tabs markup is as below:.
<div id="tabs-container" class="align-center">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane-1" data-toggle="tab" data-url="/site/loadTab.php?1">One</a></li>
<li><a href="#pane-2" data-toggle="tab" data-url="/site/loadTab.php?2">Two</a></li>
<li><a href="#pane-3" data-toggle="tab" data-url="/site/loadTab.php?3">Three</a></li>
</ul>
</div>
You can then setup a errorCallback for each tab pane this way:
$("#tabs-container).tabsX({
enableCache: true,
maxTitleLength: 10,
errorCallback: {
'pane-1': function (data, status, jqXHR) {
// callback code
},
'pane-2': function (data, status, jqXHR) {
// callback code
},
'pane-3': function (data, status, jqXHR) {
// callback code
}
}
});
In addition to the plugin options as mentioned in previous section, the various markup settings available for the bootstrap-tabs-x plugin are mentioned below:
This is the most important part of setting up your extended tabs behavior. You must wrap the default bootstrap tabs markup within a div container with a tabs-x class.
In addition, you can add positioning classes (e.g. tabs-above) and alignment classes (e.g. tab-align-center ) to this container. You can also add the tab-sideways orientation class to rotate the tab headers sideways for the tabs-right and tabs-left positions. Read the following sections for adding various CSS classes to the container to achieve various configurations. In addition, the following HTML5 data attributes can be set within the tab container to control a few behavior of the tabs:
data-enable-cache: boolean, whether to enable caching of ajax generated tab pane content. Defaults to true.
data-cache-timeout: integer, timeout in milli-seconds after which cache will be refreshed. Defaults to 300000 (i.e. 5 minutes).
data-max-title-length: integer, the maximum length of characters in each tab pane title. Text overflowing beyond this limit will be hidden with an ellipsis (and displayed on mouse hover of the tab title). Defaults to 9.
<!-- tabs-x container -->
<div class="tabs-x align-{center|right} tabs-{above|below|right|left}
{tab-sideways} {tab-bordered} {tab-height-(xs|sm|md|lg}">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
With release v1.1.0, the plugin supports loading content via ajax. You can configure the following properties to each tab link, for ajax loading:
data-url: the server url that will process the ajax response and return a json encoded html.
data-loading-class: the css class to be applied to the tab header when content is loading. Defaults to kv-tab-loading.
In addition, the plugin by default includes a caching object to cache the content generated via Ajax. Check the data attributes on the tabs container for controlling caching settings.
For example:
<ul class="nav nav-tabs">
<li class="active"><a href="#one2" data-toggle="tab">One</a></li>
<li><a href="#two2" data-toggle="tab" data-url="/site/load-tab-data">Two</a></li>
<li><a href="#three2" data-toggle="tab">Three</a></li>
</ul>
You can set four different positions for your tabs - by adding one of the following CSS classes to your tabs container.
tabs-above: The default tabs position - the navigation tabs will be placed above the tab content.
tabs-below: The navigation tabs will be placed below the tab content.
tabs-left: The navigation tabs will be placed left of the tab content.
tabs-right: The navigation tabs will be placed right of the tab content.
By default the tabs are aligned/floated to the left of the parent container. In addition, you can set the following alignment options, by adding
one of the following CSS classes to your tabs container.
tab-align-center: Align the entire tabs widget to the center of your parent container.
tab-align-right: Align the entire tabs widget to the right of your parent container.
These alignments makes sense for working only with the tabs-above and tabs-below positions. It is recommended not to use them with the tabs-right and tabs-left positions.
You can add the tab-bordered class to the tabs container to make it boxed within a border. The border radius and box format will automatically
be adjusted based on your tab position.
By default each of the tab pane heights are automatically calculated. When using the tab-bordered style, you may wish to set fixed heights, so the tab
widget dimensions are consistent for all tabs. For this you can add one of the following fixed height classes to your tabs container:
tab-height-xs: Maintains a fixed tab pane height to an extra small height specification of 135 px, and overflows the extra content to scrollable.
tab-height-sm: Maintains a fixed tab pane height to a small height specification of 195 px, and overflows the extra content to scrollable.
tab-height-sm: Maintains a fixed tab pane height to a medium height specification of 280 px, and overflows the extra content to scrollable.
tab-height-lg: Maintains a fixed tab pane height to a large height specification of 400 px, and overflows the extra content to scrollable.
You can add your own custom classes (names beginning with tab-height-) and the plugin will automatically format the vertical tabs borders
(tabs-left and tabs-right) based on this. Note in this case your custom class must modify the tab-content height like shown below:
/* custom fixed height class */
.tab-height-500 .tab-content {
height: 500px!important;
overflow: auto;
}
For the tabs-left and tabs-right positions, you can rotate the tab header labels to show it sideways. For this you can add the tab-sideways class
to your tabs container. In this case the tab header label width is fixed. Any long label text overflowing will not be wrapped and shown along with an ellipsis.
The plugin will automatically set the title attribute to show the complete label on hovering the tab header.
The sideways orientation makes sense for working only with the tabs-left and tabs-right positions. It is recommended not to use them with the tabs-above and tabs-below positions.
The bootstrap-tabs-x plugin triggers additional events in addition to the events triggered by the parent bootstrap tabs plugin. The event is triggered on each tab link containing [data-toggle=tab]. The following events are available:
This event is triggered on clicking each tab.
$('div.tabs-x .nav-tabs [data-toggle="tab"]').on('tabsX:click', function (event) {
console.log('tabsX:click event');
});
For ajax tabs, this event is triggered after the content is loaded in the tab pane. The following parameters are available with this event for ajax enabled tabs:
jqXHR: object, the jQuery XMLHttpRequest object used for the ajax transaction.
status: string, the status text received from the server via ajax response.
$('div.tabs-x .nav-tabs [data-toggle="tab"]').on('tabsX:click', function (event, jqXHR, status) {
console.log('tabsX:click event');
});
This event is triggered before sending an ajax call to the server. It is applicable only for ajax tabs when you set a data-url attribute on your tab link. The following parameters are available with this event for ajax enabled tabs:
jqXHR: object, the jQuery XMLHttpRequest object used for the ajax transaction.
settings: object, the settings object for jquery ajax before send.
$('div.tabs-x .nav-tabs [data-toggle="tab"]').on('tabsX:beforeSend', function (event, jqXHR, settings) {
console.log('tabsX:beforeSend event');
});
This event is triggered after successful completion of an ajax call to the server. It is applicable only for ajax tabs when you set a data-url attribute on your tab link. The following additional parameters are available with this event:
data: string, the output data retrieved from the server via ajax response.
status: string, the status text received from the server via ajax response.
jqXHR: object, the jQuery XMLHttpRequest object used for the ajax transaction.
$('div.tabs-x').on('tabsX:beforeSend', function (event, data, status, jqXHR) {
console.log('tabsX:beforeSend event');
});
This event is triggered after an ajax processing error. It is applicable only for ajax tabs when you set a data-url attribute on your tab link. The following additional parameters are available with this event:
jqXHR: object, the jQuery XMLHttpRequest object used for the ajax transaction.
status: string, the status text received from the server via ajax response.
message: string, the error exception message thrown.
$('div.tabs-x').on('tabsX:error', function (event, jqXHR, status, message) {
console.log('tabsX:error event with message = "' + message + '"');
});
The bootstrap-tabs-x plugin allows access to the following methods:
This method initializes the tabs cache to original settings. It is applicable when enableCache is set to true. One can call this method via javascript as shown below:
$('#tabs-container').tabsX('initCache');
// tabs-container is the main tabs container on which the tabs-x plugin is initialized
This method just flushes and clears the tabs cache. It is applicable when enableCache is set to true. This method accepts a parameter tabIds, which can have one of the following values:
undefined | null | false | empty string/object: the entire tab cache for the plugin will be flushed/reset.
string: you can pass the HTML identifier for the tab, and cache specific to this tab identifier will be flushed/reset.
object | array: you can pass an array of HTML identifiers for the tabs, and cache specific to each of these tab identifiers will be flushed/reset.
One can call this method via javascript as shown below:
// tabs-container is the main tabs container on which the tabs-x plugin is initialized
$('#tabs-container').tabsX('flushCache');
// or for specific tabIds
$('#tabs-container').tabsX('flushCache', ['tab-1', 'tab-2']);
The plugin has been implemented as extensions in the following frameworks
| Sl. | Framework | Extension Source | Developed By | Extension Demo |
|---|---|---|---|---|
| 1. | Yii Framework 2.0 | Yii2 Tabs X | Krajee | Yii2 Tabs X |
Do you know any other framework extension using this plugin which is not listed here? Tell us so that we can consider its inclusion in this list.
bootstrap-tabs-x is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.