Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing nav tabs.

Objectives and Outcomes

In this, we will discuss one more feature Bootstrap supports, the nav tabs.

Adding Tab Navigation Elements

Start by adding the following code to the body.

<div class="col-sm-12 col-xs-12 col-md-12 col-lg-12">
	<h2>Corporate Leadership</h2>
	<ul class="nav nav-tabs">
		<li class="active"><a href="#X" data-toggle="tab">Person X, CEO</a></li>
		<li><a href="#Y" data-toggle="tab">Person Y, CFO</a></li>
		<li><a href="#Z" data-toggle="tab">Person Z, CTO</a></li>
		<li><a href="#A" data-toggle="tab">Person A. CMO</a></li>
	</ul>
</div>

Note the use of the <ul> tag with the nav and nav-tabs classes to set up the tab navigation. Each list item within the list acts as the tab element. Within each list item, note that we set up the <a> tags with the href pointing to the id of the tab pane of content to be introduced later. Also note that the <a> tag contains the data-toggle=tab attribute. The first list element's <a> tag contains the class active. This tab will be the open tab when we view the web page. We can switch to the other tabs using the tabbed navigation that we just set up.

Adding Tab Content

The details about the various corporate leaders should now be organized into various tab panes. To begin this, we will enclose the entire content into a div element with the class tab-content as specified below:

<div class="tab-content">

        ...
    
</div>





Then we take the name and description of the CEO of the company and enclose it within a tab-pane as follows

<div role="tabpanel" class="tab-pane fade in active" id="X">
	<h3>X - some content</h3>
</div>
<div role="tabpanel" class="tab-pane fade" id="Y">
	<h3>Y - some content</h3>
</div>
<div role="tabpanel" class="tab-pane fade" id="Z">
	<h3>Z - some content</h3>
</div>
<div role="tabpanel" class="tab-pane fade" id="A">
	<h3>A - some content</h3>
</div>

Corporate Leadership

X - some content

Y - some content

Z - some content

A - some content


Note the use of the tab-pane, fade, in, and active classes and with peter as the id. This is the same id used as the href in the <a> link in the navigation. The remaining content is also similarly enclosed inside appropriate divs with the correct ids and the classes specified as above. Only the first tab pane will have the in and active classes specified to indicate that the content should be visible on the web page by default.

Modifying the tab-content CSS

We now modify the CSS styles for the tab-content class in the custom css file as follows:

.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

Corporate Leadership

X - some content

Y - some content

Z - some content

A - some content


This modification adds a 1px border to the tab content which joins with the upper border introduced by the tab navigation element to give a clean tab like appearance. In this exercise we learnt the use of tabbed navigation, tab content and tab panes and their use in organizing and navigating within the content in a page.