CODEWITHSUNDEEP
twitter-bootstrap
bryanlewis
bryanlewis

Reputation: 569

Get rid of Gutter in TwitterBootstrap

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 gutter to give it a margin:0px; I'm not currently seeing anything like this in the twitter bootstrap documentation.

Upvotes: 11

Views: 28986

Answers (9)

SteveSTL
SteveSTL

Reputation: 998

I know this is an old topic...but I'm sure it's still an issue for folks. I found this very useful CSS that solved it for me. Enjoy!

/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:0;
}

/* only for column content visible */
.col-lg-1>div {background-color:#ddd;}

CSS Source - http://bootply.com/109530

Upvotes: 1

acrawly
acrawly

Reputation: 453

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.

Upvotes: 0

Mini John
Mini John

Reputation: 7941

Had the same problem, this solved it for my pretty nice:

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Upvotes: 2

Victor Augusto
Victor Augusto

Reputation: 2426

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

Upvotes: 0

Storm
Storm

Reputation: 4455

Just download a custom version of the framework from here

http://twitter.github.com/bootstrap/customize.html#variables

and make the gridGutter = 0px

Upvotes: 3

Anand Vijay
Anand Vijay

Reputation: 3

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

Upvotes: 0

filitchp
filitchp

Reputation: 615

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.

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75399

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.

Upvotes: 9

Karl
Karl

Reputation: 595

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;

Upvotes: 3

Related Questions