title: Bootstrap - Center Tabs in Container
body: <p>I have a web page that uses Bootstrap 3. In this page, I have several tabs. At this time, the tabs are left-aligned across the top. You can see yourself in this <a href="http://www.bootply.com/03cnW7CnUY" rel="nofollow">Bootply</a>. I'm trying to figure out how to make the tabs appear in the center of the tab strip. As of right now, it looks like this:</p>
  
  <pre><code>+-------+-------+
  | Tab 1 | Tab 2 |
  +       +-------+--------------------------------------------------+
  | content                                                          |
  |                                                                  |
  |                                                                  |
  |                                                                  |
  +------------------------------------------------------------------+
  </code></pre>
  
  <p>However, I'm trying to make it look like this:</p>
  
  <pre><code>                          +-------+-------+
                            | Tab 1 | Tab 2 |
  +-------------------------+       +--------------------------------+
  | content                                                          |
  |                                                                  |
  |                                                                  |
  |                                                                  |
  +------------------------------------------------------------------+
  </code></pre>
  
  <p>I tried using the text-center class without success. I know the <code>ul</code> is a block-level element so it fills the width of its container. For that reason, I tried setting <code>float:left</code> on the ul. But that didn't work either. Once again, the Bootply is <a href="http://www.bootply.com/03cnW7CnUY" rel="nofollow">here</a>. The code looks like this:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="container"&gt;
          &lt;ul class="nav nav-tabs" role="tablist"&gt;
              &lt;li role="presentation" class="active"&gt;&lt;a href="#first" aria-controls="first" role="tab" data-toggle="tab"&gt;First Tab&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#second" aria-controls="second" role="tab" data-toggle="tab"&gt;Second Tab&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="tab-content"&gt;
                  &lt;div role="tabpanel" class="tab-pane active" id="first"&gt;
                      &lt;h2&gt;First Tab&lt;/h2&gt;
                  &lt;/div&gt;
  
                  &lt;div role="tabpanel" class="tab-pane" id="second"&gt;
                      &lt;h2&gt;Second Tab&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure how to get the tabs to center.</p>