Bootstrap 3 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 the Bootstrap framework.

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

bootstrap tabs wrap

That may particularly become a problem if your content is seen on mobiles or smartphones. Since, with the 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 add the plug-in JS file and initiate plug-in by calling the function in the <script> section. Apart from that, I made a few changes in the markup:

bootstrap tabs scroll

Online demo and code

Squeeze the screen to see the arrows for scrolling the tabs to the left and right (on desktop).

The markup used in the example:

<div class="container">

<h3>A demo of scrollable Tabs</h3>

<ul class="nav nav-tabs" role="tablist">

  <li role="presentation" class="active"><a href="#hometab" role="tab" data-toggle="tab">Tech Home</a></li>

  <li role="presentation"><a href="#javatab" role="tab" data-toggle="tab">Java Language</a></li>

  <li role="presentation"><a href="#csharptab" role="tab" data-toggle="tab">C# Tutorial</a></li>

  <li role="presentation"><a href="#mysqltab" role="tab" data-toggle="tab">MySQL Database</a></li>

  <li role="presentation"><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>





<!-- Tab panes -->

<div class="tab-content">

  <div role="tabpanel" class="tab-pane" id="hometab">The home of technology!</div>

  <div role="tabpanel" class="tab-pane active" id="javatab">The Java - A true object oriented programming language. <br />

  Developed by James Gosling from the Sun Microsystems in 1995.<br /><br />



  <li>Chapter 1</li>

  <li>Chapter 2</li>

  <li>Chapter 3</li>

  <li>Chapter 4</li>



  <div role="tabpanel" class="tab-pane" id="csharptab">C# is also a programming language</div>

  <div role="tabpanel" class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>

  <div role="tabpanel" class="tab-pane" id="jquerytab">jQuery content here</div>




A little script:





Creating scrollable tabs in JavaScript

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

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️