Centering a Twitter Bootstrap button
Solution 1
Bootstrap has it's own centering class named text-center.
<div class="span7 text-center"></div>
Solution 2
If you don't mind a bit more markup, this would work:
<div class="centered">
<button class="btn btn-large btn-primary" type="button">Submit</button>
</div>
With the corresponding CSS rule:
.centered
{
text-align:center;
}
I have to look at the CSS rules for the btn
class, but I don't think it specifies a width, so auto
left & right margins wouldn't work. If you added one of the span
or input-
rules to the button, auto margins would work, though.
Edit:
Confirmed my initial thought; the btn
classes do not have a width defined, so you can't use auto side margins. Also, as @AndrewM notes, you could simply use the text-center
class instead of creating a new ruleset.
Solution 3
Wrap in a div styled with "text-center" class.
Solution 4
Question is a bit old, but easy way is to apply .center-block to button.
Solution 5
Since you want to center the button, and not the text, what I've done in the past is add a class, then use that class to center the button:
<button class="btn btn-large btn-primary newclass" type="button">Submit</button>
and the CSS would be:
.btn.newclass {width:25%; display:block; margin: 0 auto;}
The "width" value is up to you, and you can play with that to get the right look.
Steve
Tom Maxwell
Updated on July 20, 2022Comments
-
Tom Maxwell almost 2 years
I'm making a form with Twitter Bootstrap, and am having a really difficult time centering the button. It's contained inside a div with a span of 7. Below is the HTML, and the button is at the very bottom. Any recommendations on how to center this thing?
<div class="form span7"> <div id="get-started"> <div id="form-intro"> <strong><h1>1. Get Started: Some basics</h1></strong> </div> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputSaving">What are you saving for?</label> <div class="controls"> <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc."> </div> </div> <div class="control-group"> <label class="control-label" for="description">Add a short description</label> <div class="controls"> <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea> </div> </div> <div class="control-group"> <label class="control-label" for="categoryselect">Choose a Category</label> <div class="controls"> <select class="span4" id="categoryselect"> <!-- Add some CSS and JS to make a placeholder value--> <option value="Kittens">Kittens</option> <option value="Keyboard Cat">Keyboard Cat</option> <option value="Twitter Bird">Twitter Bird</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="imageselect">Choose an image</label> <div class="controls span4"> <img src="piggyimage.png" id="imageselect" alt="image-select" /> </div> </div> <div class="control-group"> <label class="control-label" for="goal">Your Saving Goal</label> <div class="controls"> <input type="text" class="span4" id="goal" placeholder="$1337"> </div> </div> <button class="btn btn-large btn-primary" type="button">Submit</button> </form> </div> </div>
-
Chris Everitt about 10 yearsThis worked for me, my button will remain centered even with the viewport causes Bootstrap to put the button on the nextline. ' <div class="col-sm-1 text-center"> <input type="submit" value="Search Again" class="btn btn-primary"/> </div>'
-
mildog8 almost 10 yearsEven better you could use bootstraps
text-center
class and not have to write any css yourself. for example<div class="text-center"><button class="btn btn-large btn-primary" type="button">Submit</button></div>
-
scrowler almost 10 yearsProblem is that this makes the button width fill its container as well
-
rakeden about 9 yearsWhy force the element to appear block-level. Better use Bootstraps build in solutions
-
Subtubes about 9 yearsBest answer uses the API
-
Malkierian over 8 yearsThis worked just fine for me, but only when using a form <button>. Applying the btn classes to a <div> filled the parent element.
-
TOPKAT almost 8 yearsJust too bad that it doesn't work with
<div class="btn-group btn-group-lg span7">
!