title: Distribute buttons (elements) evenly in columns
body: <p>I have been trying to implement a keypad-like widget using bootstrap.</p>
  
  <p>Here is a reconstruction of the problem at hand:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div class="row"&gt;
      &lt;span class="col-md-3"&gt;
          &lt;button class="btn btn-lg btn-warning"&gt;1&lt;/button&gt;
      &lt;button class="btn btn-lg btn-warning"&gt;2&lt;/button&gt;
      &lt;button class="btn btn-lg btn-warning"&gt;3&lt;/button&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
      &lt;span class="col-md-3"&gt;
          &lt;button class="btn btn-lg btn-warning btn-block"&gt;SPAN&lt;/button&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem with this is that the buttons labelled 1, 2 and 3 are not spread out evenly to fill the 3 column width parent.</p>
  
  <p>Now, I do know there is the <code>btn-group-justified</code> class that I can use, but it stretches the buttons to fit the width of the parent. What I want is to add fillers between the buttons.</p>
  
  <p>Can that be accomplished using Bootstrap or should I use <code>display: table</code> or some weird voodoo code involving margins.</p>