Responsive Vertical Tabs In Bootstrap 4

Responsive Vertical Tabs In Bootstrap 4
File Size: 29.1 KB
Views Total: 1643
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is an upgraded version of the bootstrap-vertical-tabs that helps developers create a fully responsive vertical tabs component in the 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.

<link rel="stylesheet" href="/path/to/b4vtabs.min.css" />
<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>

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>

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