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.
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
, andleft
. - 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
, orright
of the parent container/page. - Automatically align & format heights and widths for bordered tabs for
right
andleft
positions. - Allows a rotated
sideways
tab header orientation for theright
andleft
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
View the plugin documentation and plugin demos at Krajee JQuery plugins.
Pre-requisites
- Bootstrap 5.x or 4.x or 3.x (Requires bootstrap
tabs.js
) - Latest JQuery
- Most browsers supporting CSS3 & JQuery.
Installation
Using Bower
You can use the bower
package manager to install. Run:
bower install bootstrap-tabs-x
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
You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin assets (css and js folders) into your project.
Usage
Load Client Assets
You must first load the following assets in your header.
<!-- bootstrap 5.x or 4.x or 3.x is supported -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- if using with bootstrap 5.x and 4.x include bootstrap-tabs-x-bs4.css style.
If using with bootstrap 3.x include bootstrap-tabs-x.css -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/bootstrap-tabs-x-bs4.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- alternatively if using with bootstrap 3.x uncomment below and comment out (exclude /bootstrap-tabs-x-bs4.css) -->
<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/bootstrap-tabs-x.css" media="all" rel="stylesheet" type="text/css" / -->
<!-- jquery JS library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- bootstrap-tabs-x JS library -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/bootstrap-tabs-x.min.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.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 beforebootstrap-tabs-x.js
.
Markup
You just need to setup the markup for the extended bootstrap tabs to work now. Refer documentation for details.
Bootstrap 5.x
<!-- BOOTSTRAP 5 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-bs-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-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-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-bs-toggle="tab" aria-controls="dropdown1">Dropdown 1</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-bs-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>
Bootstrap 4.x
<!-- 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>
Bootstrap 3.x
<!-- 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" 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>
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:
<div id="tabs-container" class="align-center">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
You can enable the tabsX plugin via javascript like below:
$("#tabs-container").tabsX({
enableCache: true,
maxTitleLength: 10
});
Documentation
View the plugin documentation at Krajee plugins.
License
bootstrap-tabs-x is released under the BSD 3-Clause License. See the bundled LICENSE.md
for details.