Bootstrap horizontal scrollable tab bar

Question

I am creating an app in Bootstrap 3 with a tab bar. I am dynamically adding and removing tabs. This all works great, what I would like to do though is to have the tab bar be

Answer 1

Here is an example:

(Not working in snippet for some reason, so here is a 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>