Elements:Tabbable Navs
This page shows how to extend the default tabs and pills style navigation into Javascript based tabbable content.
You can make tabs and pills use Javascript to create tabbable panes of local content by doing the following:
-
Below the tabs add a wrapper element with the class
.tab-contentwhich contains the "tabbable panes" each of which require the class.tab-paneand an ID ie.id="tab-1". -
Add a
data-toggle="tab"(for.nav-tabs) ordata-toggle="pill"(for.nav-pills) attribute to each.nav-linkand also add ahrefordata-targetwhich points to the tab it should open when clicked ie.href="#tab-1". -
Add a
.activeclass to one of the.nav-linkitems and it's correspond.tab-paneto set which tab is "active" on page load.
Basic Tabbable Tabs
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content
Basic Tabbable Pills
Pill 1 Content
Pill 2 Content
Pill 3 Content
Pill 4 Content
Boxed / In cards
Tabs
Pills
Vertical Tabs
Default
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Align Right
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Step Tabs
Step 1
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Step 2
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Step 3
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Step 4
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Circles
Step 1
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Step 2
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Step 3
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Step 4
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Bold tabs
Horizontal
Tab 1
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Tab 2
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Tab 3
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Tab 4
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Vertical
Tab 1
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Tab 2
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Tab 3
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Tab 4
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Fade effect
To make tabs fade in, add
.fade
to each
.tab-pane
. The first tab pane must also have
.show
to make the initial content visible.