Bootstrap Tabs Tutorial
Bootstrap provides an easy way to create basic nav components like as tabs and pills. All the Bootstrap’s nav components – tabs and pills – share the same base markup and styles through the .nav class.
Tabs add quick, dynamic functionality to transition through panes of local content, even via dropdown menus.
NOTE: Nested tabs are not supported.
For creating basic Bootstrap Tab download our example. The output of the example is as shown in diagram 1.
Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.
To make tabs fade in, add the class .fade to each .tab-pane.
NOTE: The first tab pane must also have .in to properly fade in initial content.
<div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="home">......</div> <div role="tabpanel" class="tab-pane fade" id="profile">......</div> <div role="tabpanel" class="tab-pane fade" id="messages">......</div> <div role="tabpanel" class="tab-pane fade" id="settings">......</div> </div>
When showing a new tab, the events fire in the following order:
|These event fires when a new tab is to be shown and thus the previous active tab is to be hidden.
Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
|These event fires on tab displayed, but before the new tab have been shown.
Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
NOTE: If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.
Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an Email and we’d be happy to put up your code spec for download via our website.
Should you have any queries about the Bootstrap Tab examples code do post these in the Bootstrap 3 section of the OpenSourceVarsity forum.
We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you.