Bootstrap text-center is not working on buttons

Question

So I've been trying to center these 2 buttons in bootstrap for some time now. I found out there is already a bootstrap css class called "text-center" so I'm trying to use that but unfortunately no matter where I use it, it doesn't change anything.

  <div class="form-group"> <div class="col-sm-10 text-center"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </div> 

The code is in a form, which is in a well, and if you need any more information let me know. Thanks

Answer 1

Use .center-block class it is the best way to centering an element in bootstrap framework

<div class="form-group">
<div class="col-sm-10 center-block">
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</div>
</div>

Answer 2

Your code snippet works once you include the bootstrap css file (see below). You may have other code affecting this section of your page- try checking your browser console to see what styles are overriding your intended styling.

Also you need to use an offset value to 'center' your col-sm-10 if you do not want to use col-sm-12

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group"> <div class="col-sm-10 col-sm-offset-1 text-center"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </div>