StackOverflowNewbie StackOverflowNewbie - 6 months ago 38
CSS Question

Twitter Bootstrap: white space on left and right side in smaller screen widths?

I have markup similar to this:

<div class="container-fluid">
<div class="container">
<div class="row">
<h1>Hello World!</h1>
</div>
</div>
</div>


Obviously, I want the
.container-fluid
to span the entire width of the screen. However, in smaller screen widths, it doesn't seem to do that. There appears a space on both sides of the screen, thus reducing the amount of screen real estate and affecting the overall look and feel I'm trying to achieve.

Is there a way to get rid of this space? I want
.container-fluid
to span the entire width of the screen regardless of the screen width.

Answer

In bootstrap-responsive.css, the body gets a 20px padding on the left and right at smaller windows sizes. If you don't want that at all, remove it from your version. It's at line 803 and looks like this:

@media (max-width: 767px) {
  /*body { These are the lines you want to remove
    padding-right: 20px; 
    padding-left: 20px;
  }*/

If you just want to remove the white space on a certain element or class, add these margins to it:

 margin-left:-20px;
 margin-right:-20px;