title: Twitter Bootstrap Tabs: How to: Increase spacing between tabs
body: <p>I'm using ui bootstrap for angular  (which uses twitter bootstrap css). I was able to center the tabs, but I cannot figure out how to add spacing (margins) between the tabs (RIGHT OR LEFT). I tried adding margin-right: 100px;  in   .nav-tabs > li  but that did not work.</p>
  
  <p><strong>Html:</strong> </p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
  
                 &lt;tabbed-Panel class="bottomTabPanel"&gt;
              &lt;!--&lt;div data-fade="1" ngModel="activeTab" bs-Tabs&gt;--&gt;
              &lt;tabs&gt;
                  &lt;pane ng-repeat="pane in panes" heading="{{pane.title}}"  active="pane.active"&gt;
                      &lt;div ng-include src="activeContent()"&gt;&lt;/div&gt;
                  &lt;/pane&gt;
              &lt;/tabs&gt;
              &lt;!--&lt;/div&gt;--&gt;
          &lt;/tabbed-Panel&gt;
              &lt;/div
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Css</strong>   </p>
  
  <pre><code>.bottomTabPanel{
  
      position:absolute;
      bottom:-12px;
      display:block;  
      background-color:#666666;
      padding-left: 75px;
      padding-right: 75px;
  }
      /*Bottom tab panel style: */
      .nav-tabs&gt;li&gt;a {
          height:73px;
          width: 131px;
          border: 1px solid transparent;
          -webkit-border-radius: 0px 0px 0 0;
          -moz-border-radius: 0px 0px 0 0;
          border-radius: 0px 0px 0 0;
          color: #5261ac;
          font-size: 19px;
          font-weight:bold;
          background-color:#c2c8e4;
  
  
       }
  
       .nav-tabs&gt;.active&gt;a, .nav-tabs&gt;.active {
          color: #ffffff;
          cursor: default;
          background-color:#ed174f;
          border:none;
       }
        /* center tabs in container */
       .nav-tabs &gt; li {
          float:none;
          display:inline-block;
          margin-right: 100px;
       }
       .nav-tabs {
          text-align:center;
       }
  
        /* for centering text in the tab*/
       .tabbable ul {
              display:table-row;
          }
          .tabbable ul li
          {
              display: table-cell;
              list-style-type: none;
              vertical-align: middle;
              /*margin left &amp; right here fixed the issue! */
              margin-right: 16px;
              margin-left: 16px;
          }
          .tabbable ul li a {
              display:table-cell;
              vertical-align: middle;
              text-align:center;
  
          }
  </code></pre>