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

 

        
Left Tabs
        

        
 

          

            
Home
            
Profile
            
Messages
            
Settings
          
        

        


          

            
Home Tab.
            
Profile Tab.
            
Messages Tab.
            
Settings Tab.
          
        

        


      

      

        
Right Tabs
        

        


          

            
Home Tab.
            
Profile Tab.
            
Messages Tab.
            
Settings Tab.
          
        

        
 
          

            
Home
            
Profile
            
Messages
            
Settings
          
        

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.