Bootstrap scrolling tabs by using jQuery plug-in

The Bootstrap default tabs vs scrolling tabs

In the Bootstrap tabs tutorial, I showed a few demos of creating tabs by using built-in classes of Bootstrap framework.

If you look at the demos by squeezing the screen (if look at it in large screens), then you can see the tabs will wrap and may look cluttered like this:

bootstrap tabs wrap

You can see the live demo with the code and see how it wraps as the screen gets smaller.

See online demo and code

That may particularly become a problem if your content is seen in mobiles or smart phones. Since, with mobile first Google index, the hidden content (in tabs or other sections) may play an important role.

One of the answers to this situation can be creating tabs with scrolling and this is the topic of this tutorial.

How to create scrollable Bootstrap tabs?

You may use the jquery-bootstrap-scrolling-tabs plug-in for creating the scrollable tabs of Bootstrap. The plug-in can be downloaded from the Github website (to download and more info click here).

All I have done to the above example is added the plug-in JS file and initiated plug-in by calling the function in the <script> section. Apart from that, I a few changes in the markup:

bootstrap tabs scroll

See online demo and code

Squeeze the screen for seeing the arrows for scrolling the tabs to the left and right.

The markup used in example:


A little script:


Creating scrollable tabs in JavaScript

You may also use data-driven tabs option as using this plug-in. An example can be seen here.