Responsive Vertical Tabs For Bootstrap 4

Image may be NSFW.
Clik here to view.

A pure CSS extension that creates vertically-oriented tabs component in your Bootstrap 4 project.

It also has the ability to converts the vertical tabs into horizontal ones when running your Bootstrap webpage on mobile devices.

How to use it:

1. Download and load the b4vtabs.min.css after Bootstrap’s stylesheet.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/b4vtabs.min.css" />

2. Add one of the following CSS classes to your Bootstrap 4 tabs component and done.

• left-tabs: tabs on the left side
• right-tabs: tabs on the right side
• sideways-tabs: sideways design

<ul class="nav nav-tabs left-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#tab-panel-1" data-toggle="tab">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#tab-panel-2" data-toggle="tab">Tab 2</a>
  </li>
  <li class="nav-item">
    <!-- use the title attribute to show a tooltip with the full long name
         in case the tab is trucated-->
    <a
      class="nav-link"
      href="#tab-panel-3"
      title="More Description Here"
      data-toggle="tab"
      >Tab 3</a
    >
  </li>
</ul>

<div class="tab-content">
  <article class="tab-pane container active" id="tab-panel-1">
    Tab Panel 1
  </article>
  <article class="tab-pane container" id="tab-panel-2">
    Tab Panel 2
  </article>
  <article class="tab-pane container" id="tab-panel-3">
    Tab Panel 3
  </article>
</div>

The post Responsive Vertical Tabs For Bootstrap 4 appeared first on CSS Script.