Previous
Next

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 show active" id="tab1">
  <h3> ... </h3>
  <p> ... </p>
</div>

Note the use of the tab-pane, fade, show, and active classes and with tab1 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 show and active classes specified to indicate that the content should be visible on the web page by default.

The HTML view is:

Previous
Next