Responsive Vertical Tabs For Bootstrap 5/4

Category: CSS & CSS3 | January 25, 2024
Views Total:210 views
Official Page:Go to website
Last Update:January 25, 2024


Responsive Vertical Tabs For Bootstrap 5/4


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

It also has the ability to convert 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.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- For Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/b5vtabs.min.css" />
<!-- For Bootstrap 4 -->
<link rel="stylesheet" href="/path/to/b4vtabs.min.css" />

2. Add one of the following CSS classes to your Bootstrap 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 class="nav-item">
    <a class="nav-link" href="#tab-panel-2" data-toggle="tab">Tab 2</a>
  <li class="nav-item">
    <!-- use the title attribute to show a tooltip with the full long name
         in case the tab is trucated-->
      title="More Description Here"
      >Tab 3</a
<div class="tab-content">
  <article class="tab-pane container active" id="tab-panel-1">
    Tab Panel 1
  <article class="tab-pane container" id="tab-panel-2">
    Tab Panel 2
  <article class="tab-pane container" id="tab-panel-3">
    Tab Panel 3



  • Added Bootstrap 5 version

You Might Be Interested In:

One thought on “Responsive Vertical Tabs For Bootstrap 5/4

  1. Joe

    not very responsive if you have more than 3 tabs…should stack as accordions on mobile


Leave a Reply