Center button under form in bootstrap

html css button twitter-bootstrap center

105,014

Solution 1

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

Solution 2

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>

Solution 3

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>

Solution 4

I do it like this <center></center>

<div class="form-actions">
            <center>
                    <button type="submit" class="submit btn btn-primary ">
                        Sign In <i class="icon-angle-right"></i>
                    </button>
            </center>
</div>

Solution 5

Width:100% and text-align:center would work in my experience

<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>

View more solutions

105,014

Author by

Fastkowy

Updated on July 05, 2022

Comments

Fastkowy almost 2 years

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>

Fastkowy about 11 years

button's bigger and stick to left again
Fastkowy about 11 years

hey, looks good in JSBin but take a look on pic up. still the same place.
Leniel Maccaferri about 11 years

Note: that CSS code on my answer must come after the Bootstrap CSS.
Fastkowy about 11 years

thin line show up and i think button is in center now. maybe there is a problem with form?
Leniel Maccaferri about 11 years

Can you create a JS Bin with all the HTML markup you have? In the picture you show on your question I can't see a thin line. Maybe your current CSS code is interfering...
Fastkowy about 11 years

i45.tinypic.com/2rz83mc.png .form-actions has also margin,padding-top, border etc. so i paste only that's what you gave. same on html. but as you can see on picture(that's whole screen), button's on the left.
Leniel Maccaferri about 11 years

In your JSBin you're forgetting to close one <div> tag. It looks OK here: jsbin.com/otusoq/2
Fastkowy about 11 years

hey,it works! button's on the center, at least i've changed form width to smaller;)
Leniel Maccaferri about 11 years

Nice to know you got it working! :D These kind of things are difficult to spot since we don't have the full code to debug here.