Question

My Bootstrap setup is very simple and quite similar to this example. I’ve a sidebar of the left and a content on the right. The simple task i’m tring to accomplish is centering the right side of the page.

More in general i’d like to center any div placed inside div.span9. I’ve used .span4 .offset4 but it doesn’t work:

<!--End of sidebar -->
<!-- Right side -->
<div class="span9">
    <!-- Right side-->
    <div class="form-container span4 offset4">
        <form class="form-horizontal">
            <!-- ... -->
        </form>
    </div>
</div>
<!--/span-->

Here you can see the complete code and a live example on jsFiddle. Any help would be much appreciated, thanks.

Answer 1

Update : Bootstrap supports fluid offsets since 2.1.0 (or around that). See the Fluid Offseting doc

---

There is no offset in the fluid grid. Check this one : Offset Margin-Left Percentages for Fluid Row in Bootstrap

And secondly, if you put some content in the .span4 that overflows, the centering will only be applied to the .span4 container. You should fix the content width too (i.e. .control-group and .control).

If you prefer the easy way, you can keep the grid static (non-fluid) and use .offsetX classes or margin-left: auto; margin-right: auto;.