DEV Community

Cover image for Create Tabpanel using Boostrap
Ifeanyi Chima
Ifeanyi Chima

Posted on • Edited on

Create Tabpanel using Boostrap

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.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Image description

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>

Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee

Thank you, please follow me

HTML GitHub

References

Simple-Bootstrap-Tab
Bootstrap Tabs

Top comments (0)