DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create Tabpanel using Boostrap
Ifeanyi Chima
Ifeanyi Chima

Posted 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

Thank you, please follow me

Buy Me A Coffee

linkedin
twitter
github

References

Simple-Bootstrap-Tab
Bootstrap Tabs

Top comments (0)

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.