StackOverflowNewbie StackOverflowNewbie - 1 year ago 132
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>

Obviously, I want the
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
to span the entire width of the screen regardless of the screen width.

Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download