Center align multiple buttons with Bootstrap 3.2.0 - html

Question

I know this question has been asked a lot about center a button or a div, but I can't find an answer for multiple buttons/divs.
I have a few sections in my design that require 2 or 3 buttons to be center aligned with a 10px margin between them, I also require them to span 2 cols. I'll paste the code below that I'm using and hopefully one of you can tell me where I'm making the mistake, thanks in advance.
<div class="container">
<div class="row">
<div class="col-lg-2 col-lg-offset-3 sec-1-btn">More</div>
<div class="col-lg-2 sec-1-btn">More</div>
<div class="col-lg-2 sec-1-btn">More</div>
</div>
</div>
#mixin btns {
background: $yellow;
color: $cream;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
text-align: center;
padding: 12px 0;
}
I have tried adding a margin-right: 10px to the buttons but then they aren't centered due the first being stuck in it's position. I have also tried using the center-block class but can't seem to get it to work. I'm sure I'm not the only person to have had this problem and it's probably me just not seeing the obvious. Once again, thanks in advance.

Answer 1

Use Bootstrap's text-center class..
<div class="container">
<div class="row">
<div class="col-lg-2 col-lg-offset-3 sec-1-btn text-center">More</div>
<div class="col-lg-2 sec-1-btn text-center">More</div>
<div class="col-lg-2 sec-1-btn text-center">More</div>
</div>
</div>
http://www.bootply.com/cK0rmAOcXR

Answer 2

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...
<div class="row start-btns">
<div class="col-lg-6 col-lg-offset-3 test">
<div class="row">
<div class="col-lg-5 pull-left start-btn">Get Started</div>
<div class="col-lg-5 pull-right tour-btn">Tour The Site</div>
</div>
</div>
</div> <!-- End .row .start-btns -->
#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;
}
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.