Press "Enter" to skip to content

Bootstrap 4 Stylesheet Which Implements Vertical Navigation Tabs

Responsive Vertical Navigation Tabs for Boostrap 4 is an upgraded version of bootstrap-vertical tabs which helps developers create a fully responsive vertical tabs component in BS4.

vertical tabs bootstrap, vertical tabs in bootstrap 4, bootstrap vertical tabs responsive, vertical tabs design, tabs bootstrap 4, bootstrap 4 tabs responsive

How to make use of it:

1. Override the default variables within 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 utilizing the next 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>

Responsive Vertical Tabs In Bootstrap 4, Responsive Vertical Navigation Tabs Plugin/Github

Bootstrap-4-Vertical-Navigation-Tabs-Demo


See Demo And Download

Official Website(tromgy): Click Here

This superior jQuery/javascript plugin is developed by tromgy. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.