Responsive Vertical Tabs For Bootstrap 4

Category: CSS & CSS3 | April 9, 2020
Author:tromgy
Views Total:5,458 views
Official Page:Go to website
Last Update:April 9, 2020
License:MIT

Preview:

Responsive Vertical Tabs For Bootstrap 4

Description:

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>

You Might Be Interested In:


Leave a Reply