Bootstrap horizontal scrollable tab bar

Question

I am creating an application in Bootstrap 3 with a tab bar. I dynamically add and remove tabs. All this works fine, but I need to make the tab bar scroll horizontally through the tabs if there are too many tabs to fit the width of the application, and not create multiple lines or tabs.

Has anyone done this or does he have an idea how to implement this?

Answer 1

Here is an example:

(It doesn’t work for the fragment for any reason, so here is the link to Bootply : http://www.bootply.com/oROUAMwsG1 )

.nav-tabs { overflow-x: auto; overflow-y: hidden; display: -webkit-box; display: -moz-box; } .nav-tabs>li { float: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="col-md-4"> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a> </li> <li><a href="#tab2" data-toggle="tab">Section 2</a> </li> <li><a href="#tab2" data-toggle="tab">Section 3</a> </li> <li><a href="#tab2" data-toggle="tab">Section 4</a> </li> <li><a href="#tab2" data-toggle="tab">Section 5</a> </li> <li><a href="#tab2" data-toggle="tab">Section 6</a> </li> <li><a href="#tab2" data-toggle="tab">Section 7</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>I'm in Section 2.</p> </div> </div> </div> </div> </div>