Tabs

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> 
...