Last Updated on April 2, 2024 by Roshan Parihar
In this tutorial, learn how to create vertical tab menus with Bootstrap and CSS. You can display multiple contents in one section with vertical tab menus. The menus are placed on the leftmost part of the screen.
The content is placed to the right of these menus. If you want to check the relevant tab content, you have to click or select your required menu tab. You can add as many tab menus as you want.
Let’s find out how to create vertical tab menus in Bootstrap.
How To Create Vertical Tab Menus Using Bootstrap
To create your vertical menu, you have to first use the tab menu from the post on how to create Bootstrap dynamic tab menus with tab content. After that, you have to use and add the below given few CSS and the code given below. However, you can change the CSS code as per your requirement.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style> .nav-tabs{ float: left; margin-right: 20px; border: 1px solid #ccc; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ background: #ddd; } .nav-tabs>li{ float: none; } .nav-tabs>li>a{ margin-right: 0; } .tab-content{ border-top: 1px solid #ccc; } </style> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#menu1">Menu1</a></li> <li><a data-toggle="tab" href="#menu2">Menu2</a></li> <li><a data-toggle="tab" href="#menu3">Menu3</a></li> </ul> <div class="tab-content"> <div id="menu1" class="tab-pane fade in active"> <h3>Vertical Tab Menu1</h3> First tab menu content. </div> <div id="menu2" class="tab-pane fade"> <h3>Vertical Tab Menu2</h3> Second tab menu content. </div> <div id="menu3" class="tab-pane fade"> <h3>Menu3</h3> Third tab menu content. </div> </div> |
Output
Bootstrap Vertical Tab Menus
Initially, the content is in a hidden state except the start one. When you click the required tab menu, the other tab content becomes hidden and the selected tab menu content starts displaying. You can design your own tabs using the below method.
The above example contains the 3 tabs. Each tab contains its relevant content. Click each given tabs in the above-given example. You will get only the relevant or matching content of the tab. You can add more menus to add more content in just a small section.
You may also like to read
- Bootstrap Nav Tabs And Pills
- How To Show Bootstrap Dropdown Menu On Hover
- Bootstrap 4 Accordion With Plus Minus Icons Collapse
- How To Add Datepicker To Input Field With Bootstrap
I hope you like this post on how to create a vertical tab menu with Bootstrap and CSS.