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

See Demo And Download