 <p>Okay so, I had a similar problem where I needed two buttons centered at the top of the page. Due to the problem I just dropped it to one button (it was easier that way). Since I'm having the same problem now with three buttons, I can't drop them to one, so I reverted back to the two original buttons that caused me a problem and came up with this...</p> <pre><code>&lt;div class="row start-btns"&gt; &lt;div class="col-lg-6 col-lg-offset-3 test"&gt; &lt;div class="row"&gt; &lt;div class="col-lg-5 pull-left start-btn"&gt;Get Started&lt;/div&gt; &lt;div class="col-lg-5 pull-right tour-btn"&gt;Tour The Site&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- End .row .start-btns --&gt; @mixin btns { background: $yellow; color: $cream; font-weight: 700; font-size: 1.3em; text-transform: uppercase; text-align: center; padding: 12px 0px; } .call-btn, .start-btn, .tour-btn { @include btns; } .start-btn { margin-right: 1em; } </code></pre> <p>Having the parent ".test" span 6 cols and centered allowed me to nest another row with two buttons spanning 5 cols (actually 3 due to nesting) and pull one left and other right. This gives the effect that both buttons are spanning 3 columns and centered perfectly with a 10px spacing.</p>