Responsive Vertical Tabs In Bootstrap 5 And 4

This is an upgraded version of the bootstrap-vertical-tabs that helps developers create a fully responsive vertical tabs component in your Bootstrap 5 or Bootstrap 4 project.

It uses CSS media queries to determine the current screen size and automatically switches to horizontal tabs when the view is too narrow for the vertical tabs on the side.

How to use it:

1. Override the default variables in the custom-variables.scss.

// When the view is narrower than this navpill-like buttons are used,
// otherwise horizontal tabs are used up until $vertical-tabs-min width
$horizontal-tabs-min: 26em;

// When the view is wider than this, vertical tabs are used
$vertical-tabs-min: 48em;

// Set this depending on the longest caption text of the tabs
// If the text is still longer than that, it will be truncated with ellipsis
// NOTE: there are practical limits on this value, the "good" values
// seem to be somewhere between 4 and 12rem;
$fixed-tab-size: 8rem;

// These only apply to regular (not sideways) vertical tabs
// In all other cases the text is center-aligned
$left-tabs-text-align: left;
$right-tabs-text-align: right;

2. Load the compiled stylesheet in your Bootstrap project.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Vertical Tab (Bootstrap 4) -->
<link rel="stylesheet" href="/path/to/b4vtabs.min.css" />
<!-- Vertical Tab (Bootstrap 5) -->
<link rel="stylesheet" href="/path/to/b5vtabs.min.css" />

3. Place tabs on the left or right of the box using the following CSS classes:

<ul class="nav nav-tabs left-tabs">
  Tabs Here
</ul>

<ul class="nav nav-tabs right-tabs">
  Tabs Here
</ul>

4. Create 'Sideways' left or right tabs:

<ul class="nav nav-tabs left-tabs sideways-tabs">
  Tabs Here
</ul>

<ul class="nav nav-tabs right-tabs sideways-tabs">
  Tabs Here
</ul>

Changelog:

2021-10-02

• Fix media breakpoints

2021-09-29

• Fix typos

2021-06-21

• Added Bootstrap 5 version

2021-06-20

• Update for Bootstrap 4.6

---

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