Fastkowy Fastkowy - 1 month ago 6
CSS Question

Center button under form in bootstrap

i have some problems with Bootstrap. i centered form and button by using

span6 offset3
and don't know how to center button under this form right now. i tried with
text-align: center
but still it's more on the left.

<div class="container">
<div class="row">
<div class="span6 offset3">
<form>
<input class="input-xxlarge" type="text" placeholder="Email..">
<p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
</form>
</div>
</div>
</div>



Answer

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