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.
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:
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.
Let's look at the code below:
nav nav-tabsclass in a
ulelement to wrap the list items (
<li>) which makes it look like a navigation bar.
<li>element wraps an
hrefbeginning with a
#followed by the name of the tab each represents.
àctivethe Bootstrap class that makes it the first tab to be seen.
divhas a bootstrap class of
tab-contentand it wraps the whole content of the tab.
divelement has a class
tab-pane fade in activethat adds the tab styling to it, and it also has an
idof home. Remember the
hrefwe used in the
<div>wrapping the tab contents. Inside this, we can put images, text, etc. The rest of the tabs are the same with different
View all Courses