Get rid of Gutter in TwitterBootstrap

Question

Maybe I\'m crazy but is there not a way to get rid of the 20px gutter on the twitter bootstrap? For example I\'ve used frameworks that use an alpha and omega that over-ride the

Answer 1

You can place your content into container-fluid div:

<div class='container-fluid'>
...
</div>

And then modify (in bootstrap.css) or override the container-fluid class:

.container-fluid {
    padding-left: 0px;
    margin-left: -20px;
  }

boostrap-responsive.css has the same class so you can set different margins for mobile screens vs. desktop screens.

Answer 2

With the bootstrap you don't need a class to remove the gutter, it is removed by the .row class where you place your span divs automatically so everything sits nicely within the grid.

.row {
    margin-left: -20px;
}

A little clarification.

The other frameworks, such as the 960.gs grid, use an .alpha and .omega to remove the excess margin on the left or right of a grid so they can sit the grid elements nicely within a line. With the bootstrap this is not the case anymore since the grid has that excess margin removed by the .row div, which is required to have your .span divs sit nicely within the grid.

Answer 3

UPDATE:

Don't see anything in the documentation either, but here is a fix:

If you want to remove the gutter on the left and right ends of your container, you will have to add a class for the .alpha and the .omega.

.alpha { margin-left: 0; }
.omega { margin-right: 0; }

If you want to change all the gutters:

In the variables.less file, you can change the Gutter width:

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------

@gridGutterWidth: 20px;

Answer 4

Its better to add a custom style similar to alpha and omega in 960.gs framework.

Answer 5

body {
  margin-right: -15px;
  overflow-x: hidden;
}

Answer 6

Try adding this to your custom css:

.row-nogutter {
    margin-right: 0;
    margin-left: 0;
 }

And using your row like <div class='row row-nogutter'>

If this still doesn't work try adding !important but I don't recommend it.