Question

How can I create a nested Bootstrap layout with padding in one of the sections?

An illustration is below. If I wrap #main-container in a Bootstrap div with .span12, it works. But that means that #main-content is now 40px thinner than the .span12 width, which means I can’t use the Boostrap grid inside of it. (For instance, it’d be great to make #left-column a .span9 and #right-column a .span3, but I can’t.)

Is there a better way to create this layout?

Answer 1

I think it really depends on what you want to achieve with the padding.

For instance, if you want a background in the space provided by the padding, you most certainly need an actual padding. But if on the other hand you just want some spacing, you should be able to stick to the original grid (giving margins to the .span children instead of their container).

Based on your layout, the fluid solution is obviously more adaptable and easier to implement.

Takes advantage of the fluid grid inside the padded element : Demo (jsfiddle)

<div class="container">
    <div class="row">
        <div class="span12" id="header">#header</div>
    </div>
    <div id="main-container">
        <div class="row-fluid">
            <div class="span12" id="main-content">#main-content</div>
        </div>
        <div class="row-fluid">
            <div class="span9" id="left-column">#left-column</div>
            <div class="span3" id="right-column">#right-column</div>
        </div>
    </div>
</div>

Update Added a more explicit border and background : Border demo (jsfiddle)

#main-container {
    padding: 20px;
    border: 3px solid red;
    background: yellow;
}
#main-container > .row-fluid { background: white; }