Geek Answers Handbook

How to add padding to a Bootstrap 3 container without screwing up the mesh?

Many site designs require a dark background with a lighter foreground page containing the site’s content. When using Bootstrap, it seems logical that you can simply apply a light color to the div.container and do with it. However, the Bootstrap container does not provide any extras between its edges and the columns inside, so this solution provides a light background, but the contents of the column are painted over with edges - it does not look very good.

This is a common problem, and there are several solutions in stackoverflow and other places for Bootstrap 2, but I did not find anything useful for Bootstrap 3.

+8
css padding twitter-bootstrap background twitter-bootstrap-3
source share
1 answer

One solution is Bootstrap 2, which uses .container-fluid, which switches the internal grid from pixel to percent. Then you can apply the registration to the background div inside the .container-fluid, and the inner columns will easily adapt to fit. This seemed like a good approach, but the specific CSS used to customize some other styles didn't work with Bootstrap 3.

After digging out the Bootstrap source, I noticed that the only difference between the .container and .container-fluid rules in grid.less are the three media queries. I wrapped the contents of the page in .container-fluid, and then redefined its definition to include media queries so that the contents of the page would respond in the same way as headers and footers that 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 .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 the addition to the container .page-container:

 .page-container { .page-bg { padding: 15px; background-color: #EFEFEF; } } body { background-color: #333 }

It seems to work. I did not finish the styles for the interfaces that will be in this container, however, there may be problems along the way, but everything seems to be stopping for now.

Here is a working example of this solution on codepen.io.

Note that the solution above uses less.css after including Bootstrap and mixins variables for inactive 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; }
+3
source share

More articles:


All Articles