title: How keep tabs in one line
body: <p>How can I keep these tabs in one line while being also responsive for mobiles? </p>
  
  <p>Here is the code. </p>
  
  <pre><code>&lt;div class="navbar"&gt;
     &lt;div class="navbar-inner"&gt;
         &lt;ul class="nav nav-tabs"&gt;
             &lt;li class="active"&gt;&lt;a href="#step1" data-toggle="tab"&gt;Application&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#step2" data-toggle="tab"&gt;Personal Information&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#step3" data-toggle="tab"&gt;Educational Background&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#step4" data-toggle="tab"&gt;Professional Exam&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#step5" data-toggle="tab"&gt;Work Experiences&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#step6" data-toggle="tab"&gt;References&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#step7" data-toggle="tab"&gt;Family Background&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JSFiddle <a href="https://jsfiddle.net/8ns8op64/" rel="nofollow noreferrer">Here</a></p>