How to Create Vertical Tab Menus Using Bootstrap

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.

Test it Live

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

I hope you like this post on how to create a vertical tab menu with Bootstrap and CSS.