Tabs provide an option to split your content into separate pages. This is an ideal component when you have a particularly large form, which you want to split up into a logical grouping. For example, when you're editing a customer's record, you might want to split their contact details from their address details, 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 script:
<ul class="nav nav-tabs"> <li class="active"><a href="#info" data-toggle="tab">Customer Info</a></li> <li><a href="#address" data-toggle="tab">Address</a></li> <...