title: Perfect center align horizontally with Bootstrap
body: <p>There are some options I can choose from when it comes to horizontal center alignment with Bootstap.</p>
  
  <p>I can either use <code>offset</code> class or use blank <code>span</code> class as a placeholder.
  One other option can be using custom alignment like the following</p>
  
  <pre><code>.center {
      float: none;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>None of these options solve my issue because the content of the div container has to fill up the width by 100%.</p>
  
  <p>Let's say I have the following</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
        &lt;div class="span4 offset4"&gt;
          &lt;button class="btn"&gt;1-1&lt;/button&gt;
          &lt;button class="btn"&gt;1-2&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If the buttons do not fill up the whole div space of <code>span4</code>, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.</p>
  
  <p>Here I have a canvas to play with. <a href="http://jsbin.com/aNokOgu/2/edit" rel="nofollow">JS BIN</a></p>