Bootstrap 5 horizontal scrolling tabs
Tags: bootstrap, javascript, webdev, productivity
Published: 2022-01-10 07:06:09

More than once, we need to add several tabs to our websites/apps to split the UI nicer. However, when there are more than 4, they might not look so great, especially in mobile environments.

I faced the experience that I needed to add 4 tabs, and my app started to show the second row on some devices. This didn't look great:

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/117i5j0dbfvpiihw3j2y.jpg)

That's why I did research and found this great code for Bootstrap 4:

https://www.codeply.com/go/Loo3CqsA7T

It didn't work as expected because it depended on jQuery, and I was using Bootstrap 5. I didn't want to add just one extra layer for that. That's why I re-wrote it with JS, and this is the result:

![preview2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdoiqljo6xd87bnku3ft.png)
![preview3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ukw1uzuqpfy7szmb0iq.gif)

This is a snippet of the required code:

### Install:

Install with [npm](https://www.npmjs.com/): `npm i scrolling-tabs-bootstrap-5`

[![npm version](https://img.shields.io/npm/v/scrolling-tabs-bootstrap-5)](https://www.npmjs.com/package/scrolling-tabs-bootstrap-5)

### Required libraries:

```html
<!--Bootstrap icons-->
<link rel="stylesheet" href="node_modules/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css">

<!--External library-->
<script src="node_modules/move-js/move.min.js"></script>
<!--https://visionmedia.github.io/move.js/-->

<!--Scrollable libs-->
<link href="node_modules/scrollable-tabs-bootstrap-5/dist/scrollable-tabs.css" rel="stylesheet">
<script src="node_modules/scrollable-tabs-bootstrap-5/dist/scrollable-tabs.js"></script>
```

### HTML example:

```html
<div class="w-100">
    <div class="scroller scroller-left float-start mt-2"><i class="bi bi-caret-left-fill"></i></div>
    <div class="scroller scroller-right float-end mt-2"><i class="bi bi-caret-right-fill"></i></div>
    <div class="wrapper-nav">
        <nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
            <a class="nav-item nav-link pointer active" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="public" aria-selected="true">Tab1</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab2" role="tab" data-bs-toggle="tab">Tab 2</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab3" role="tab" data-bs-toggle="tab">Tab 3</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab4" role="tab" data-bs-toggle="tab">Tab 4</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab5" role="tab" data-bs-toggle="tab">Tab 5</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab6" role="tab" data-bs-toggle="tab">Tab 6</a>
        </nav>
    </div>
    <div class="tab-content p-3" id="myTabContent">
        <div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" >
            This is the content of Tab 1...
        </div>
        <div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 2...
        </div>
        <div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 3...
        </div>
        <div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 4...
        </div>
        <div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 5...
        </div>
        <div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 6...
        </div>
    </div>
</div>
```

I published it on GitHub if you want to improve it:
https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5

You can also test it here:
https://supernovaic.github.io/scrollable-tabs-bootstrap-5/

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)