Center button under form in bootstrap

If you're using Bootstrap 4, try this:

<div class="mx-auto text-center">
    <button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>

Remove that <p> tag and add the button inside a <div class="form-actions"> like this:

<div class="form-actions">
    <button type="submit" class="btn">Confirm</button>
</div>

an then augment the CSS class with:

.form-actions {
    margin: 0;
    background-color: transparent;
    text-align: center;
}

Here's a JS Bin demo: http://jsbin.com/ijozof/2

Look for form-actions at the Bootstrap doc here:

http://twitter.github.io/bootstrap/base-css.html#buttons

With Bootstrap 3, you can use the 'text-center' styling attribute.

<div class="col-md-3 text-center"> 
  <button id="button" name="button" class="btn btn-primary">Press Me!</button> 
</div>

Related