Displaying buttons with Twitter Bootstrap - html

Question

I'm trying to display two custom buttons in the same row and centered across the page. Currently, the buttons are showing on two different rows. Also, there has to be a better way of centering the buttons than with 'offset3'. Thank you in advance.
<div class = "container">
<div class="row">
<div class="col-sm-3 offset3">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>

Answer 1

You simply use Bootstrap's default class .text-center and that's it, keeping in mind the sum of your columns must be 12 (unless you use a custom number of columns). See code below:
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red "> Test 1</button>
</a>
</div>
<div class="col-sm-6 text-center">
<a href="#">
<button class="btn btn-yellow " onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
And see Bootply. I have added some CSS for visualization purposes, but you don't need it at all, only the HTML part. And of course, you could use text-left, text-right, text-justify, etc. See Bootstrap Type Alignment for complete list

Answer 2

Try this:
TYPE 1
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 row">
<a href="/bat-times/week">
<button class="btn btn-red pull-right">Test 1</button>
</a>
</div>
<div class="col-xs-6 col-sm-6 row">
<a href="#">
<button class="btn btn-yellow pull-left" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
DEMO1
TYPE 2
<div class="container">
<div class="row text-center">
<a href="/bat-times/week">
<button class="btn btn-red">Test 1</button>
</a>
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
DEMO2

Answer 3

I found in your code you are using col-sm-3 which is not applicable for smaller devices like mobile rather it will work for tablet and desktop etc. we know that bootstrap grid system has divided our device screen with 12 equal parts if we will use col-xs-6 for our both div then it will divide our device screen into two equal part whether it is a mobile or tablet... doesn't matter. Then I used bootstrap text-center class for making the inside element centered align, bootstrap center-align class which is nothing but text-align:center; in our plain css.
Try the below piece of code. Demo
<div class = "container">
<div class="row">
<div class="col-xs-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-xs-6 text-center">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>