How to center a div with Bootstrap2?

Question

http://twitter.github.com/bootstrap/scaffolding.html

I tried like all combinations:

<div class="row">   <div class="span7 offset5"> box </div> </div> 

or

<div class="container">   <div class="row">     <div class="span7 offset5"> box </div>   </div>   </div> 

changed span and offset numbers...

But I cant get a simple box perfectly centered on a page :(

I just want a 6-column-wide box centered...

---

edit:

did it with

<div class="container">   <div class="row" id="login-container">     <div class="span8 offset2">        box     </div>   </div> </div> 

But the box is too wide, is there any way I can do it with span7 ?

span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...

Answer 1

Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:

.center {      float: none;      margin-left: auto;      margin-right: auto; } 

If you have this class defined, just add it to the span and you're good to go.

<div class="span7 center"> box </div> 

Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.