How to center a div with Bootstrap2?
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3"
, class="span4 offset4"
, etc... something as simple as style="text-align: center"
on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
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.
Bootstrap3 has the .center-block
class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.