Menu
Many site designs call for a dark background with a lighter foreground page that contains the site's content. When using Bootstrap, it seems logical that one would merely apply the light color to the .container div and be done with it. However, Bootstrap's container does not provide any padding between its edges and the columns within, so this solution provides a light background but with the column content flush with the edges - not a good look.
This is a common problem and there are several solutions on stackoverflow and elsewhere for Bootstrap 2, but I couldn't find anything useful for Bootstrap 3.
327
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.
Use px-0 on the container and no-gutters on the row to remove the paddings. Quoting from Bootstrap 4 - Grid system: Rows are wrappers for columns.
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.
One of the Bootstrap 2 solutions involved using .container-fluid which switches the internal grid from pixel to percentage based. Then one may apply padding to a a background div within .container-fluid and the internal columns will seamlessly adjust to fit. This seemed like a good approach, but the specific CSS used to tweak some of the other styles didn't work with Bootstrap 3.
After digging through the Bootstrap source, I noticed that the only difference between the .container and .container-fluid rules, in grid.less are three media queries. I wrapped my page's content in .container-fluid then overrode its definition with one that included the media queries so that the page content would respond the same as the header and footer, which use the standard .container.
Here's the HTML:
<html>
<head>
<title>Bootstrap 3 Container Padding Example</title>
</head>
<body>
<div class="page-container">
<div class="container-fluid">
<div class="page-bg">
<!-- PAGE CONTENT -->
</div>
</div>
</div>
</body>
</html>
And then the .less:
.page-container > .container-fluid:first-child {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
Then added padding to the .page-container div:
.page-container {
.page-bg {
padding: 15px;
background-color: #EFEFEF;
}
}
body {
background-color: #333
}
This seems to work. I haven't completed the styling for the interfaces that will reside within this container yet so there could be issues down the road but everything seems to render fine so far.
Here is a working example of this solution on codepen.io.
Note that the solution above uses less.css after including Bootstrap's variables and mixins .less files. Here's the compiled CSS:
.page-container > .container-fluid:first-child {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.page-container > .container-fluid:first-child {
width: 750px;
}
}
@media (min-width: 992px) {
.page-container > .container-fluid:first-child {
width: 970px;
}
}
@media (min-width: 1200px) {
.page-container > .container-fluid:first-child {
width: 1170px;
}
}
.page-container .page-bg {
padding: 15px;
background-color: #EFEFEF;
}
body {
background-color: #333333;
}
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