Center button under form in bootstrap - html

Question

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 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

Answer 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>

Answer 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>

Answer 4

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>

Answer 5

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.

Answer 6

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>

Answer 7

You can use this
<button type="submit" class="btn btn-primary btn-block w-50 mx-auto">Search</button>
Look something like this
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>

Answer 8

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!

Answer 9

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

Answer 10

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>

Answer 11

It's working completely try this:
<div class="button pull-left" style="padding-left:40%;" >