Tabs are a user interface (UI) element that allow us to see different panes of information without using up extra space. Just like tabs in a binder or book, they mark a placement on the page for more information and are identified by what the pane of information contains. When you click on a tab, you are presented with the information associated with that tab.
Bootstrap is a framework to help us quickly create tabs. In this article, we review how to get Bootstrap set up, learn why we might need to use tabs, and take a look at some examples of Bootstrap tabs in action.
Getting Started
The first thing we need to do to make sure we can view tabs on our web page is to ensure we have the proper dependencies. For this project, we need Bootstrap, Popper.JS and jQuery. Navigate to Bootstrap’s Quick Start page for assistance with getting all your dependencies.
It’s up to you how to link the packages we need, but the easiest, most beginner-friendly way is to use the content delivery network — the CDN — for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags — order matters here.
You’re ready to get started!
Using Bootstrap Documentation To Create Tabs
On the left hand side of the “Introduction/Getting Started” page, you see a sidebar that links to various things. Take a look for the “Components” link and click on it. This will navigate you to the first of Bootstrap’s many available components: “Alerts”. If we take a look at the sidebar again, it’s been updated to show the different links to all the different components we have available to us.
Click on the “Navs” components. This will have the tabs information that we need to get started.
Start with the Base Nav
To use Bootstrap’s given code in their documentation, start with the base nav at the top of the page. This demonstrates that the nav class doesn’t specifically handle any special styling.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>To create the tabs, add the nav-tabs class to the first line of code in the class attribute.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div> ***** tab content will go here as <div>s ***** </div>From a UI standpoint, we now have tabs. But we don’t yet have the functionality. Let’s take a look at how to do that next.
Add Roles to the Markdown
To keep up with the ARIA standard (accessibility rules), add a role attribute to each of the tags:
- For <ul>, add role=”tablist”
- For <a>, add role=”tab”
- For <div> that wraps around the contents of each tab, add role=”tabpanel”
Add Attributes to Point to Tab-Content
At this point, we know at a high level, we have a block of code dedicated to the links, and we have another block of code dedicated to the content. We need to do a couple of things to get the tab connected with its content. Let’s start with the <ul> block of code.
- First, add ids to all of your <a> elements. Use “tab-name + -tab” (for example, a tab whose name is home – their id would be “home-tab”).
- For the <div> block of code that houses the tab-contents (those to be used as tabpanels), use the name of the tab they are associated with as the id (i.e. content associated with the home tab should have an id of “home”).
- Next, add an href to the tab that links to the id of the tab-content it is associated with. To keep using our “home” tab analogy, the <a> tag should have an href of “#home”.
- Add a data-toggle attribute that indicates what is to be toggled. In this instance it is “tab”.
- Finally, add any aria attributes that will help those with assistive technologies.
Our <ul> element with our links should look like this so far:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="a-tab" class="nav-link active" role="tab" data-toggle="tab" href="#a">A</a>
</li>
<li class="nav-item">
<a id="b-tab" class="nav-link" role="tab" data-toggle="tab" href="#b">B</a>
</li>
<li class="nav-item">
<a id="c-tab" class="nav-link" role="tab" data-toggle="tab" href="#c">C</a>
</li>
<li class="nav-item">
<a id="d-tab" class="nav-link" role="tab" data-toggle="tab" href="#d">D</a>
</li>
</ul>The tab-content element is next. This is a separate block of code from the <ul> block that contains all of our links.
- Make sure your tab contents divs are enclosed in an outer div that acts as a container for each of the smaller divs. Also, ensure each of the smaller divs is named for the appropriate tab heading from the previous block.
- Ensure that the proper ARIA attributes are added. Here, we use aria-selected and aria-labelledby. Aria-labelledby matches the id of the matching tab heading. Aria-controls match the id of that particular div element.
- Finally, add a class attribute that at least contains the “show” class name. This is a bootstrap class that assists with showing the proper pane when you click on a particular tab. The “active” part of the class name indicates which pane is showing. “Fade” indicates that an animation is being used to fade the pane in and out when a tab has been clicked.
The code for one of the tab-contents divs is as follows:
<div class="tab-content" style="padding: 20px;">
<div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
</div>Use this as a guide to create the rest of the tab-content divs. Refer to the code below to help you if you get stuck.
Here is the entire codebase in full:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<!-- tab headings -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="a-tab" class="nav-link active" data-toggle="tab" role="tab" href="#a">A</a>
</li>
<li class="nav-item">
<a id="b-tab" class="nav-link" data-toggle="tab" role="tab" href="#b">B</a>
</li>
<li class="nav-item">
<a id="c-tab" class="nav-link" data-toggle="tab" role="tab" href="#c">C</a>
</li>
<li class="nav-item">
<a id="d-tab" class="nav-link" data-toggle="tab" role="tab" href="#d">D</a>
</li>
</ul>
<!-- tab contents -->
<div class="tab-content" style="padding: 20px;">
<div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
<div id="b" aria-labelledby="b-tab" class="tab-pane fade" role="tabpanel" aria-controls="b" aria-selected="false">B</div>
<div id="c" aria-labelledby="c-tab" class="tab-pane fade" role="tabpanel" aria-controls="c" aria-selected="false">C</div>
<div id="d" aria-labelledby="d-tab" class="tab-pane fade" role="tabpanel" aria-controls="d" aria-selected="false">D</div>
</div>
<!-- jquery cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- popper js cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<!-- bootstrap cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>Conclusion
You’ve just created a tab navigational component using Bootstrap! Try your hand at creating pill navigational containers next. Happy coding!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
