Tabs provide an option to split your content into separate pages. This is an ideal component when you have a particularly large form that you want to split up into a logical grouping. For example, when you're editing an employee's record, you might want to split their basic information from their background history, as illustrated in the following screenshot:
Bootstrap tabs are divided into two parts. You first need to specify the tab names and the ID of the corresponding <div>
element to show when the user clicks on the tab. This is done by creating a standard unordered list <ul>
element with the tab names as child list items <li>
. The <ul>
element's class must be set to nav nav-tabs
or nav nav-pills
, as illustrated in the following HTML markup:
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#info" role="tab">Employee Info</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#background" role="tab">Background</a> </li> </ul>
You can use a tab or pill navigation by setting the <li>
element's data-toggle
attribute to either tab
or pill
and setting the <ul>
element's class to nav-pills
. Here's an example:
<ul class="nav nav-pills" role="tablist">
The result will look like the following screenshot in your browser:
To specify the content for the tabs, create a new <div>
element and set its class to .tab-content
. Create a <div>
element for each tab inside the parent <div>
element and set each tab's <div>
element's class to .tab-pane
as follows:
<div class="tab-content"> <div class="tab-pane active" id="info" role="tabpanel"> <fieldset class="form-group"> <label asp-for="Name" class="col-md-2 control-label"></label> <input asp-for="Name" class="form-control" /> </fieldset> <fieldset class="form-group"> <label asp-for="JobTitle" class="col-md-2 control-label"></label> <input asp-for="JobTitle" class="form-control" /> </fieldset> </div> <div class="tab-pane" id="background" role="tabpanel"> <textarea asp-for="About" rows="3" class="form-control"></textarea> </div> </div>
In the preceding markup, we created two tabs and set the active
tab to the info
tab by setting its class to .active
.
You can also activate a specific page using jQuery. To activate the background
tab as soon as the page loads, use the following code:
$(document).ready(function () { $('.nav-tabs a[href="#background"]').tab('show'); });
3.15.144.56