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?
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.
Using “div” tag: Simply adding a “div” with padding in between two “div” tags gives spacing between the “div”.
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.
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.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With