How to use the Bootstrap 4 tabs

Overview

What are tabs in Bootstrap?

Tabs are like navbars, but in this case, we do not go to another page after clicking. Instead, we remain on the same page, and the content of the click tab is displayed to us.

Use cases of tabs

Tabs can be found on the cooperate site "about us" page where each staff member has a set of tabs attached to them to describe their duties properly. It can also be found in cases where we want to make reading easier for the user instead of the cliche scrolling. Let's see an example of a bootstrap tab:

How the Bootstrap tabs work.

The tab uses the <a> element with href='#idname' . So that when the link is clicked the div with the id is called and displayed.

Example

Let's look at the code below:

Explanation

• Line 15: The tabs use the bootstrap nav nav-tabs class in a ul element to wrap the list items (<li>) which makes it look like a navigation bar.
• Line 16 to 19: Each <li> element wraps an <a>that has href beginning with a # followed by the name of the tab each represents.
• Line 16: It is the first list item that has anàctive the Bootstrap class that makes it the first tab to be seen.
• Line 22: The div has a bootstrap class of tab-content and it wraps the whole content of the tab.

• Lines 23 to 25: The divelement has a class tab-pane fade in active that adds the tab styling to it, and it also has an idof home. Remember the # leading href we used in the <a> element.
• Lines 16 to 19: We start using those names as id to the <div>wrapping the tab contents. Inside this, we can put images, text, etc. The rest of the tabs are the same with different id .

We add some JavaScript code to ensure the displayed tab is the active one.

• Lines 40 to 41: The clicked tab is called to display.