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'); 
});