bootstrap handling long tabs

See the plunkr here: http://plnkr.co/edit/2WrJSzTeE3AkQD9dX6kF?p=preview

The tabs are wrapping into multiple lines. In my app I need to create the tabs dynamically, so user can create n tabs by clicking some button ‘Add Tab’. The issue is once the tabs increased the length of container it splits to multiple lines and does not looks good, how to fix this issue?

Using bootstrap nav tabs

    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Messages</a></li>

  </ul>


Source: css

Leave a Reply