Question

I have an standard Bootstrap <div> with the .container class and an interior <div> with the .well span9 class. I need to center the the .well div in the container but it always float to left! I think it is because of using .span9 but how I can force the div to have .span9 class and also be centered?

here is the code which I have

<div class="container">
 <div class="well span9"> </div>
</div>
Was it helpful?

Solution

Something like this might be easier... unless you are dead-set on using span9

<div class="container">
    <div class="row">
        <div class="well span10 offset1"></div>
    </div>
</div>

If you use span10 and offset it by 1, it will always be centered as it is a 12 grid system (1+10+1). Also, you should add a row div under the container.

Or you could use span8 and offset2...

If you are dead-set on span9 then you can add this CSS which will center it..

.well {
    margin:0 auto;
    float:none;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top