How To Create bootstrap 4 vertical tabs?

Today, We want to share with you bootstrap 4 vertical tabs.In this post we will show you responsive vertical tabs, hear for Responsive Vertical Tabs For Bootstrap 4 we will give you demo and example for implement.In this post, we will learn about Navs – Bootstrap with an example.

Bootstrap 4 Vertical Tabs Responsive Example

Added External libs

https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css

https://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js

HTML CODE

 <div  class="col-sm-6">
        <h3>Left Tabs</h3>
        <hr/>
        <div class="col-xs-3"> 

          <ul class="nav nav-tabs tabs-left sideways">
            <li class="active"><a href="#home-v" data-toggle="tab">Home</a></li>
            <li><a href="#profile-v" data-toggle="tab">Profile</a></li>
            <li><a href="#messages-v" data-toggle="tab">Messages</a></li>
            <li><a href="#settings-v" data-toggle="tab">Settings</a></li>
          </ul>
        </div>

        <div class="col-xs-9">

          <div class="tab-content">
            <div class="tab-pane active" id="home-v">Home Tab.</div>
            <div class="tab-pane" id="profile-v">Profile Tab.</div>
            <div class="tab-pane" id="messages-v">Messages Tab.</div>
            <div class="tab-pane" id="settings-v">Settings Tab.</div>
          </div>
        </div>

        <div class="clearfix"></div>

      </div>

      <div  class="col-sm-6">
        <h3>Right Tabs</h3>
        <hr/>
        <div class="col-xs-9">

          <div class="tab-content">
            <div class="tab-pane active" id="home-vr">Home Tab.</div>
            <div class="tab-pane" id="profile-vr">Profile Tab.</div>
            <div class="tab-pane" id="messages-vr">Messages Tab.</div>
            <div class="tab-pane" id="settings-vr">Settings Tab.</div>
          </div>
        </div>

        <div class="col-xs-3"> 
          <ul class="nav nav-tabs tabs-right sideways">
            <li class="active"><a href="#home-vr" data-toggle="tab">Home</a></li>
            <li><a href="#profile-vr" data-toggle="tab">Profile</a></li>
            <li><a href="#messages-vr" data-toggle="tab">Messages</a></li>
            <li><a href="#settings-vr" data-toggle="tab">Settings</a></li>
          </ul>
        </div>

CSS Code

.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-right>li {
  margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  border-left-color: transparent;
}
.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}

I hope you get an idea about Vertical Nav Tabs Snippet.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  How to Make Links Open in a New Window or Tab using Vue JS?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Vue.js get element by idref Example
  2. Read Also:  Managing Dates and Times Using Vue.js?
  3. Read Also:  Mail send with attachment in php demo
  4. Read Also:  How to scroll to bottom of the div - Vue.js?
  5. Read Also:  CodeIgniter Simple User Registration and Login System
  6. Read Also:  Event Directives with Parameters using Angular Example
  7. Read Also:  Removing file extensions using htaccess
  8. Read Also:  Get selected option text with Vue JS Example
  9. Read Also:  Define Global Variable in vue Js Example
  10. Read Also:  Create Different CSS Geometric Shapes with Example
CLOSEX