Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested Bootstrap layout with padding

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?

Layout illustration

like image 985
Joe Mornin Avatar asked Jul 28 '12 00:07

Joe Mornin


People also ask

Can you nest containers in Bootstrap?

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

How do I put a space between my Bootstrap grid?

Using “div” tag: Simply adding a “div” with padding in between two “div” tags gives spacing between the “div”.

What is XS SM MD lg in Bootstrap?

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

What will happen if more than 12 columns are placed within a single row while designing a Bootstrap grid layout?

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.


1 Answers

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; }
like image 166
Sherbrow Avatar answered Oct 19 '22 14:10

Sherbrow