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, 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

View the plugin documentation and plugin demos at Krajee JQuery plugins.

Pre-requisites

1. Bootstrap 5.x or 4.x or 3.x (Requires bootstrap tabs.js)
2. Latest JQuery
3. 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" /&gt;
<!-- 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 before bootstrap-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.