How to create a Tabpanel using Boostrap version 5
I was working on a website and I wanted to create a tab panel just like the one I saw being used by YouTube.
In this tutorial, we will look at how to create a Tabpanel in your Website using HTML, CSS and JavaScript.
This is what I mean by a tabpanel.
Step 1
Create index.html; We will create our index.html and add the necessary files such as bootstrap.css to make this work.
Here is a link to download boostrap v 5.1.3 which is used in this article.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ifeanyi</title>
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="util/bootstrap-5.1.3.css">
</head>
<body>
<script src="util/bootstrap-5.1.3.js"></script>
</html>
Step 2
CSS Styling; Here is the css styling we would use today.
$brand: yellow;
$brand-hover: white;
.btn {
padding: 14px 27px;
margin: 0px 16px 0px 0px;
border-radius: 12px;
font-weight: 500;
@include transition-ease;
&-brand{
background-color: $brand;
border-color: 1px solid $brand;
color: $white;
&:hover{
background-color: $brand-hover;
color: $white;
}
}
}
section {
padding: 90px 0;
}
The tabs
Finally, what we have all been waiting for.
Note; We would create the navigators (the tabs) first.
<section>
<!--Navigators-->
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link btn-brand active text-uppercase" id="profile-tab" data-bs-toggle="tab" data-bs-target="#menu1" type="button"
role="tab" aria-controls="profile" aria-selected="true">Websites</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link btn-brand text-uppercase" id="contact-tab" data-bs-toggle="tab" data-bs-target="#menu2" type="button"
role="tab" aria-controls="contact" aria-selected="false">Webapps</a>
</li>
</ul>
</section>
Now, we create the content: We have two panes that we want to be able to move between.
So, we create the first tab.
<!--Web sites-->
<div class="tab-pane fade show active" role="tabpanel" id="menu1">
<div class="row g-4">
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/naomi.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View
Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/tesla.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/Digital.jpg" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
</div>
</div>
The second tab:
<!--Web apps-->
<div class="tab-pane fade" role="tabpanel" id="menu2">
<div class="row g-4">
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/new_dad-jokes.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View
Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/new_temp_converter.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/advice_api.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
</div>
</div>
Please note that both tabs will be in the same section we created earlier. Now, when we combine everything, we have this.
<section>
<!--Navigators-->
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link btn-brand active text-uppercase" id="profile-tab" data-bs-toggle="tab" data-bs-target="#menu1" type="button"
role="tab" aria-controls="profile" aria-selected="true">Websites</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link btn-brand text-uppercase" id="contact-tab" data-bs-toggle="tab" data-bs-target="#menu2" type="button"
role="tab" aria-controls="contact" aria-selected="false">Webapps</a>
</li>
</ul>
<!--Web sites-->
<div class="tab-pane fade show active" role="tabpanel" id="menu1">
<div class="row g-4">
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/naomi.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View
Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/tesla.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/Digital.jpg" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
</div>
</div>
<!--Web apps-->
<div class="tab-pane fade" role="tabpanel" id="menu2">
<div class="row g-4">
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/new_dad-jokes.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View
Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/new_temp_converter.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<img src="images/advice_api.png" alt="">
<a href="" target="_blank" class="btn btn-brand">View Project</a>
</div>
</div>
</div>
</div>
</section>
Thank you, please follow me
References
Top comments (0)