How to set gutter, margin and breakpoins to my needs?

[andrealopezmora]

I need to set gutter, margins and breakpoints to other values, what's the best way to achieve that?
Thanks.

[baj84]

+1

[jan-dh]

You can do this

Gutter

You can find adjust the gutter by changing the following:

1. Make a gutter variable: $gutter: 30px;;
2. Divide the negative margin in the .row by 2: margin-right: -$gutter/2; ...
3. Change out the padding-right and padding-left by $gutter/2

Breakpoints
At the bottom of the css file you see 3 breakpoints defined. You can change them out by Sass-variables and adjust them to your needs.

[CruelMoney]

@jan-dh what css file are you referring to?

[jdockwarder]

@jan-dh How do you set the padding for all the col-x elements? If I'm not totally wrong, then you need to select all col-(xs|sm|md|lg) elements and re-set the padding and do all that again for each new breakpoint.

UPDATE
Just add this add the beginning of your CSS:

.row {
  margin-right: -$gutter/2;
  margin-left: -$gutter/2;
}
[class|="col"]:not([class*="offset"]) {
  padding-left: $gutter/2;
  padding-right: $gutter/2;
}

[xeaone]

@jan-dh You got us pointed in the right direction but the | is "equal to or starts with". Which work if you always start with flexbox classes so I think the following is in improvement.

.row {
  margin-left: 0;
  margin-right: 0;
}
[class~="col"]:not([class*="offset"]),
[class*="col-"]:not([class*="offset"]) {
  padding-left: 0;
  padding-right: 0;
}