CODEWITHSUNDEEP
htmlcsstwitter-bootstrapless
LuTz
LuTz

Reputation: 1523

Change Bootstrap gutter

I'm using Bootstrap v3.3.4, and I'm quite new at it.

Is there any easy way to change Bootstrap gutter without recompiling it from its less files or using the website editor or any-other way that has something to do with modifying bootstrap.css?

What I'm trying to do is to get a 5px space between 2 cols and I want the changes to be in my extra.less file.

enter image description here

I've tried using this : 

div[class^="col-"]:not(:first-child) {padding-left: 2.5px;}
div[class^="col-"]:not(:last-child) {padding-right: 2.5px;}

And got the desired result.

enter image description here

But I'm facing this problem on resize :

enter image description here

So, I have to find a better way to do it, if there's any. I did some digging and the only way to achieve is to change it from its less files and use the modified bootstrap.css and I'm trying to avoid that.

Upvotes: 1

Views: 4062

Answers (4)

Meint-Willem Gaasbeek
Meint-Willem Gaasbeek

Reputation: 63

You can change the gutter width via CSS in your stylesheet. Important though is to change all three elements (container, row, col) accordingly to prevent the issue you are presenting in the images. 

.container {
    padding-right: 5px;
    padding-left: 5px;
}

.row {
    margin-right: -5px;
    margin-left: -5px;
}

.row [class*="col"],
.row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

Works for both Bootstrap 3 and 4

Upvotes: 1

carpeliam
carpeliam

Reputation: 6769

You mentioned not wanting to recompile Bootstrap's LESS (I'm guessing you mean you don't want to change the @grid-gutter-width value), but you also mention that you're using LESS, as you have an "extra.less" file. Are you importing Bootstrap as a LESS file itself, or as a CSS file? Importing Bootstrap's LESS directly into your own LESS file allows you to make changes to the variables or use their mixins without recompiling their CSS (because their CSS just gets compiled with your own LESS files).

If you want to keep the default 30px gutter size but you'd like a custom gutter for a specific case, you can make use of the gutter-width argument for the make-row and make-column mixins:

@condensed-gutter-width: 5px;
.row-condensed {
  .make-row(@condensed-gutter-width);
  .col-lg-1 {
    .make-lg-column(1, @condensed-gutter-width);
  }
  //... do this for any column that'll go inside a .row-condensed
}

(Same goes with SASS too, except it would be @include make-row($condensed-gutter-width) and @include make-lg-column(1, $condensed-gutter-width).)

I find that using the LESS mixins in my own LESS is a lot easier than trying to change the CSS after it's already been compiled.

Upvotes: 2

jumetaj
jumetaj

Reputation: 11

Put them on a container. And then use the grid system offered by bootstrap. If the you get the scale correct than it will be aligned. That would solve your problem, in case I understood it correctly

Upvotes: 0

LuTz
LuTz

Reputation: 1523

I found a solution using : 

div[class^="col-"] {
  padding-left: 2.5px;
  padding-right: 2.5px;
}

.row {
  margin-left: -2.5px;
  margin-right: -2.5px;
}

If you have a better way to do it let me know.

Upvotes: 3

Related Questions