Create Tabpanel using Boostrap
Tags: webdev, bootstrap, javascript, programming
Published: 2022-11-18 18:00:51

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elbltpp73v2kmv7gfkeq.gif)


### 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](https://getbootstrap.com/docs/5.1/getting-started/download/) which is used in this article.


```html
<!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.

```css

$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;
}
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8txjmjtkpk4wrika3ab.gif)

# The tabs

Finally, what we have all been waiting for.

**Note**; We would create the navigators (the tabs) first.

```html

<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>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ojnnpze74zdubj7nzjn.gif)

Now, we create the content: We have two panes that we want to be able to move between. 

So, we create the first tab.

```html

<!--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:

```html


<!--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>

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpxxq9rwwv3ppwf6f66o.gif)

Please note that both `tabs` will be in the same section we created earlier. Now, when we combine everything, we have this.

```html

<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>

```

<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>


**Thank you, please follow me**

[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)

**References**

[Simple-Bootstrap-Tab](https://www.aspsnippets.com/Articles/Simple-Bootstrap-Tabs-example.aspx)
[Bootstrap Tabs](https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tabs.php)