Learn how to create dynamic tabs with togglable content in this tutorial. Bootstrap dynamic tab menu is the menus that show separate content for each menu toggle. There are many separate contents associated with each menu tab. However, you can see only one content at a time.
Here is a simple example of Bootstrap tab menus:-
This is a useful way of displaying many contents in just a small section using the dynamic togglable tabs. These tabs do not support the nested tabs with each menu options.
See the types of Bootstrap dynamic tabs given below with the examples.
Bootstrap Dynamic Tab Menu Using Nav Tabs
You can create a dynamic tab menu using the Bootstrap nav tabs. See the example given below to understand the steps given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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>Menu1</h3> Create your own dynamic tab menu using the bootstrap nav tabs and open dynamic content on click of menus. </div> <div id="menu2" class="tab-pane fade"> <h3>Menu2</h3> Second tab menu. </div> <div id="menu3" class="tab-pane fade"> <h3>Menu3</h3> Third tab menu. </div> </div> |
Output
Click each menu tabs to see the separate content for each menu items. There are three tab menus with three different content for each menu item. There is a fade effect using the class .fade given to tab menus when you click them to see relevant content.
Follow each step given below to create your own dynamic tab menus.
-
To create a dynamic menu using the nav tabs, you have to put the <ul> list using the nav tabs. Now add the separate content for each list items inside the <div> tag with the class
.tab-content. -
Inside the above <div>, put content using the different id for each menu items with the class
.tab-pane. If you want to make the first item active and open, then put the class.inand.active. -
Now, put those id’s you have used for separate menu content to the attribute
hrefto the list menu with the # at the start and add the attributedata-toggle="tab".
Bootstrap Dynamic Tab Menu Using Nav Pills
To create a bootstrap dynamic tab menu using the nav pill, you need to only change the attribute data-toggle="tab" to data-toggle="pill" in the steps given in the above example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul class="nav nav-pills"> <li class="active"><a data-toggle="pill" href="#pill1">Menu1</a></li> <li><a data-toggle="pill" href="#pill2">Menu2</a></li> <li><a data-toggle="pill" href="#pill3">Menu3</a></li> </ul> <div class="tab-content"> <div id="pill1" class="tab-pane fade in active"> <h3>Menu1</h3> Create your own dynamic tab menu using the bootstrap nav tabs and open dynamic content on click of menus. </div> <div id="pill2" class="tab-pane fade"> <h3>Menu2</h3> Second tab menu. </div> <div id="pill3" class="tab-pane fade"> <h3>Menu3</h3> Third tab menu. </div> </div> |
Output
Menu1
Create your own dynamic tab menu using the bootstrap nav tabs and open dynamic content on click of menus.
Menu2
Second tab menu.
Menu3
Third tab menu.
Click each menu item to see the separate content for each menu item. The only difference between the nav tabs and nav pill dynamic tab menus is the background color in nav pills and the borders in the nav tabs.