jQuery Plugin For Extended Bootstrap Tabs - bootstrap-tabs-x

jQuery Plugin For Extended Bootstrap Tabs - bootstrap-tabs-x
File Size: 27.6 KB
Views Total: 4616
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

bootstrap-tabs-x is a lightweight jQuery plugin that extends the default Bootstrap 3/4 tabs component with custom opening/tab directions, border styles, tab content alignments, AJAX loading and much more.

How to use it:

1. Load the bootstrap-tabs-x plugin's JavaScript and CSS files into your web project which has jQuery and Bootstrap installed.

<link href="bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="bootstrap-tabs-x.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tabs-x.js"></script>

2. Extend your existing Bootstrap tabs using the following CSS modifiers.

  • tabs-above
  • tabs-bottom
  • tabs-right
  • tabs-left
  • tab-bordered
  • tab-align-center
  • tab-align-right
  • tab-align-left
  • tab-height-xs
  • tab-height-sm
  • tab-height-md
  • tab-height-lg
  • tab-sideways
<div class="tabs-x tabs-below">
  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="id01">
      <p>Content 1</p>
    <div class="tab-pane fade" id="id02">
      <p>Content 1</p>
    <div class="tab-pane fade" id="id03-1">
      <p>Content 3-1</p>
    <div class="tab-pane fade" id="id03-2">
      <p>Content 3-2</p>
  <ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#id01" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a href="#id02" role="tab" data-toggle="tab">Tab 2</a></li>
    <li class="dropdown">
      <a href="#" id="myTabDrop-kv-2" class="dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop-1">
        <li><a href="#id03-1" tabindex="-1" role="tab" data-toggle="tab">Tab 3-1</a></li>
        <li><a href="#id03-2" tabindex="-1" role="tab" data-toggle="tab">Tab 3-2</a></li>

3. Config the extended Bootstrap tabs via data-OPTION attribute on the tab container.

<div id="tabs-container" class="align-center" data-enableCache="true">
  <ul class="nav nav-tabs">
  <div class="tab-content">

4. Or using JavaScript as this:


  // enable caching of ajax
  enableCache: true,

  // timeout in milli-seconds after which cache will be refreshed
  cacheTimeout: 300000,

  // max length of title
  maxTitleLength: 9,

  // additional ajax options
  ajaxSettings: {},

  // callbacks
  successCallback: {},
  errorCallback: {},

  // additional CSS class
  addCss: 'tabs-krajee'

5. If you'd like to dynamically load external datasets via AJAX requests.

<div id="tabs-container" class="align-center">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#pane-1" data-toggle="tab" data-url="loadTab.php?1">One</a></li>
    <li><a href="#pane-2" data-toggle="tab" data-url="loadTab.php?2">Two</a></li>
    <li><a href="#pane-3" data-toggle="tab" data-url="loadTab.php?3">Three</a></li>

6. Enable, flush and clear the tabs cache with the following methods.


7. Events available.

$('[data-toggle="tab"]').on('tabsX:click', function (event) {
  console.log('tabsX:click event');

$('[data-toggle="tab"]').on('tabsX:click', function (event, jqXHR, status) {
    console.log('tabsX:click event');

$('[data-toggle="tab"]').on('tabsX:beforeSend', function (event, jqXHR, settings) {
    console.log('tabsX:beforeSend event');

$('.tabs-x').on('tabsX:beforeSend', function (event, data, status, jqXHR) {
    console.log('tabsX:beforeSend event');

$('.tabs-x').on('tabsX:error', function (event, jqXHR, status, message) {
    console.log('tabsX:error event with message = "' + message + '"');


v1.3.3 (01/12/2021)

  • Enhancements to support Bootstrap v4.x framework.
  • Enhance flushCache method to allow flushing cache of specific tabIds.
  • Add initCache method.
  • Correct code typo in README.
  • Add github contribution and PR templates.
  • Chronological ordering of issues for change log.
  • Update copyright year to current.
  • Code optimizations.
  • Rename all events to begin with tabsX: instead of tabsX.
  • Universal Module Definition for use with CommonJS, AMD or browser globals.
  • Added flushCache method for modal scenario.

This awesome jQuery plugin is developed by kartik-v. For more Advanced Usages, please check the demo page or visit the official website.