Skip to content
Missing vertical tabs component for bootstrap.
HTML CSS JavaScript
Branch: master
Clone or download
Latest commit c265ddb Jun 13, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
src vertical-text replaced with sideways. Jul 24, 2014
.gitignore New grunt build system introduced. Minify and concat tasks prepared. Jun 5, 2014
Gruntfile.js default task added Nov 7, 2014
LICENSE Initial commit Dec 1, 2013 docs updated Jun 13, 2017
bootstrap.vertical-tabs.min.css baked ♨️ Dec 2, 2016
bower.json version update Nov 7, 2014
demo.html bootstrap dependency updated to >=3.0.0, new version number added. Nov 7, 2014
index.js new version with npm support Dec 2, 2016
package.json new version with npm support Dec 2, 2016
screenshot-v.png ignored files updated. new feature info added Jun 5, 2014
screenshot.png screenshot update May 4, 2014

Bootstrap Vertical Tabs bower version

Vertical tabs component for Bootstrap 3.



  • Via npm:
 $ npm i -S bootstrap-vertical-tabs
  • Via bower (recommended):
 $ bower install bootstrap-vertical-tabs
  • Or you can just clone, download from GitHub.


  • Get the package.
  • Include css in your html. / Load with webpack or css processors.
  • Use it.

Left Tabs

<div class="col-xs-3"> <!-- required for floating -->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-left">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>

<div class="col-xs-9">
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home Tab.</div>
      <div class="tab-pane" id="profile">Profile Tab.</div>
      <div class="tab-pane" id="messages">Messages Tab.</div>
      <div class="tab-pane" id="settings">Settings Tab.</div>

Right Tabs

<div class="col-xs-9">
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home-r">Home Tab.</div>
    <div class="tab-pane" id="profile-r">Profile Tab.</div>
    <div class="tab-pane" id="messages-r">Messages Tab.</div>
    <div class="tab-pane" id="settings-r">Settings Tab.</div>

<div class="col-xs-3"> <!-- required for floating -->
  <!-- Nav tabs -->
  <ul class="nav nav-tabs tabs-right">
    <li class="active"><a href="#home-r" data-toggle="tab">Home</a></li>
    <li><a href="#profile-r" data-toggle="tab">Profile</a></li>
    <li><a href="#messages-r" data-toggle="tab">Messages</a></li>
    <li><a href="#settings-r" data-toggle="tab">Settings</a></li>

Sideways Tabs 🆕

Add sideways class to tabs.


  <ul class="nav nav-tabs tabs-left sideways">

screenshot vertical texts

Further, take a look at included demo!




Ismail Demirbilek, @dbtek.

You can’t perform that action at this time.