title: Center float left divs with twitter Bootstrap
body: <p>I'm using Bootstrap v3.0.2. I want to display a series of divs next to each other, float: left then center that group in a full width row.  What I get are the divs lined up next to each other but the entire group floats left.</p>
  
  <p>I've tried numerous suggestions from this site but have been unable to make any of them work.</p>
  
  <p>I have HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="container"&gt;
          &lt;div id="wrapBoxRow" class="row"&gt;
              &lt;div id="boxRow" class="col-md-12 col-xs-12"&gt;
                  &lt;div id="boxWrap"&gt;
                      &lt;div class="smallBox"&gt;&lt;/div&gt;
                      &lt;div class="smallBox"&gt;&lt;/div&gt;
                      &lt;div class="smallBox"&gt;&lt;/div&gt;
                      &lt;div class="smallBox"&gt;&lt;/div&gt;
                      &lt;div class="smallBox"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>    #boxWrap, #boxRow, #wrapBoxRow
      {
          float: none;
          margin: 0 auto;
      }
      .smallBox
      {
          border: 3px solid #ddd;
          float: left;
          width: 20px;
          height: 20px;
          margin-right: 12px;
      }
  </code></pre>
  
  <p>I've tried this without bootstrap and couldn't get it to work either:</p>
  
  <pre><code>&lt;div id="boxWrap"&gt;
      &lt;div class="smallBox"&gt;&lt;/div&gt;
      &lt;div class="smallBox"&gt;&lt;/div&gt;
      &lt;div class="smallBox"&gt;&lt;/div&gt;
      &lt;div class="smallBox"&gt;&lt;/div&gt;
      &lt;div class="smallBox"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>