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.