CODEWITHSUNDEEP
htmlcssbuttontwitter-bootstrapcenter
Fastkowy
Fastkowy

Reputation: 1295

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>

Upvotes: 12

Views: 106397

Answers (11)

Vansh Bhardwaj
Vansh Bhardwaj

Reputation: 446

You can use this

<button type="submit" class="btn btn-primary btn-block w-50 mx-auto">Search</button>

Look something like this enter image description here

Complete Form code -

<form id="submit">
    <input type="text" class="form-control mt-5" id="search-city" 
           placeholder="Search City">
    <button type="submit" class="btn btn-primary mt-3 btn-sm btn-block w-50 
            mx-auto">Search</button>
   </form>

Upvotes: 1

chitra
chitra

Reputation: 1

It's working completely try this:

<div class="button pull-left" style="padding-left:40%;" >

Upvotes: -1

Reeya Grace
Reeya Grace

Reputation: 31

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>

Upvotes: 2

Legionar
Legionar

Reputation: 7587

With Bootstrap you can simply use class text-center:

<div class="container">
    <div class="row">
        <form>
            <input class="input-xxlarge" type="text" placeholder="Email..">
        </form>

        <div class="text-center">
            <button type="submit" class="btn">Confirm</button>
        </div>
    </div>
</div>

DEMO

Upvotes: 0

Mitch McCoy
Mitch McCoy

Reputation: 1

Using Bootstrap, the correct way is to use the offset class. Use math to determine the left offset. Example: You want a button full width on mobile, but 1/3 width and centered on tablet, desktop, large desktop.

So out of 12 "bootstrap" columns, you're using 4 to offset, 4 for the button, then 4 is blank to the right.

See if that works!

Upvotes: 0

Moncho Chavez
Moncho Chavez

Reputation: 694

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>

Upvotes: 1

Karl Gjertsen
Karl Gjertsen

Reputation: 4918

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>

Upvotes: 15

user3257693
user3257693

Reputation: 486

Try adding this class 

class="pager"

<p class="pager" style="line-height: 70px;">
    <button type="submit" class="btn">Confirm</button>
</p>

I tried mine within a <div class=pager><button etc etc></div> which worked well

See http://getbootstrap.com/components/ look under Pagination -> Pager

This looks like the correct bootstrap class to center this, text-align: center; is meant for text not images and blocks etc.

Upvotes: 1

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102368

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

Upvotes: 23

Kevin Lynch
Kevin Lynch

Reputation: 24703

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>

Upvotes: 1

user1317647
user1317647

Reputation:

Try giving

default width, display it with block and center it with margin: 0 auto;

like this:

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

Upvotes: -1

Related Questions