How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

The easiest way is probably to use the Customizable download that Twitter Bootstrap provides. Change the @fluidGridGutterWidth variable to suit your needs in the form. Download the less files from here. You can access the variable.less file from the github bootstrap project and then change this piece of code:

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

I thought you had access to less files at first, then I realized you are using the customized gui on the website. Just download the less files, and make your changes. Then compile the less files to give you a css file or use less for development. You can use css or min.css for deployment.

In Bootstrap 4, how to change inner $grid-gutter-width depending to breakpoints?

This looks like a mistake in the docs. There used to be a map, but it was removed before 4.0.0 was released. However, it would be fairly easy to add this for just xs with SASS. For example 5px on mobile...

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
    .row > .col,
    .row > [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
}

https://www.codeply.com/go/XgynFzTmGv

Bootstrap 4.5 How can I change container grid-gutter-width

For the .container only...

.container {
   @include make-container(40px);
}

For the .container and the grid columns inside it...

.container {
   @include make-container(40px);
   @include make-grid-columns($grid-columns, 40px, $grid-breakpoints)
}

Codeply demo

Customizing gutter and column sizes of Bootstrap

Bootstrap has a set of variables that you can override in your project if you want. _variables.scss

Max width: $container-max-widths,

number of columns: $grid-columns,

and gutter size: $grid-gutter-width-base.

What's more, you can set different gutter sizes for each screen size: $grid-gutter-widths.

You can use not precompiled css file of bootstrap, but scss version of it and compile scss files by yourself.

---

Update:

Ups, author uses less version of Bootstrap. So you can change less variables: @gridColumns, @gridColumnWidth, @gridGutterWidth, and so on.

How to add consistent grid-gutter-width across multiple breakpoints in bootstrap 3.1.1

In BS3, the "gutter" is created using padding, instead of margins so easiest way to create the look of a gutter is by using a container inside the col-*..

http://bootply.com/113815

See this article to understand the Bootstrap 3 gutter:

http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/

Remove gutter from Bootstrap 4 grid

The narrow effects for container and gutter from Susy can be achieved easily in Bootstrap using three key changes:

1. Omit using container or container-fluid class, as stated in the documentation.

   Edit: If you need to restrict the container to 1280px, check the edit below.

2. Set default padding of columns to 25px on each side (so 50px total), instead of the initial 30px total

3. Adjust the negative margin on the row to reflect the gutter change by modifying the default to -25px margin on each side

So essentially your CSS would be:

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

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

One advantage of this approach is its responsiveness – it is not locked to any screen size such as 1280px. This can be seen in action in this jsfiddle snippet or below. Have added some responsive width output for debugging and testing in the former, omitted in the snippet below for brevity.

Edit: If you need to have the container size restricted to 1280px, you could do:

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding-left: 0;
        padding-right: 0;
    }
}

The above will ensure that the container stays at maximum 1280px when the screen is 1280px in width or more, or stick to the default Bootstrap responsiveness when it is less. If you do prefer to have it always at 1280px, remove the media breakpoint and set both width and max-width to 1280px.

#example-row {

  background: #0074D9;

  margin-top: 20px;

}

.example-content {

  display: flex;

  height: 80px;

  background-color: #FFDC00;

  text-align: center;

  align-items: center;

  justify-content: center;

}

.row {

  margin-left: -25px;

  margin-right: -25px;

}

.col,

[class*="col-"] {

  padding-right: 25px;

  padding-left: 25px;

}

@media (min-width: 1280px) {

  .container {

    max-width: 1280px;

    padding-left: 0;

    padding-right: 0;

  }

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container" id="example-container">

  <div class="row" id="example-row">

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

    <div class="col-1">

      <div class="example-content">Grid Item</div>

    </div>

  </div>

</div>

Change Bootstrap grid and container width from 1170px to 1000px for desktop

I'm assuming you are talking about bootstrap 2.3.2, not version 3. If so, in variables.less you have the following code:

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

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

which points you to all the variables and math involved... make the appropriate changes to the variables to make it add up to the new size you are looking for. Maybe you were making changes to gridColumnWidth instead of gridColumnWidth1200

Bootstrap 3 change grid column count and gutter width on specific containers using SASS mixin

Here is my solution:

First set new vars (this is just for overal column setup, not for the specific changes) in vars.scss

/************************************
***** column vars
*************************************/

$new-columns :                  12;
$new-gutter-width :             40px;

$grid-columns :                 $new-columns;
$grid-gutter-width :            $new-gutter-width;

Here is the mixin which I keep in mixins.scss

@mixin column-adjust($column,$gutter) {

    // set custom variables for our grid structure
    $grid-columns: $column !global;
    $grid-gutter-width: $gutter !global;

    .row {
        @include make-row();
    }
    @include make-grid-columns();
    // @include make-grid(xs);
    @media (min-width: $screen-sm-min) {
        @include make-grid(sm);
    }
    @media (min-width: $screen-md-min) {
        @include make-grid(md);
    }
    @media (min-width: $screen-lg-min) {
        @include make-grid(lg);
    }

    // reset global vars;
    $grid-columns: $new-columns !global;
    $grid-gutter-width: $new-gutter-width !global;

}

Make sure the order of the scss import is like this..

@import 'vars';
@import 'mixins';

Mixin example use is like so...

/************************************
***** grid changes
*************************************/

.grid {
    &.grid-10-across {
        @include column-adjust(10, $grid-gutter-width );
    }
    &.grid-24-across {
        @include column-adjust(24, $grid-gutter-width );
    }
}

.gutter-slim {
    &.gutter-slim-10 {
        @include column-adjust($new-columns, 10px );
    }
    &.gutter-slim-6 {
        @include column-adjust($new-columns, 6px );
    }
}

Hope this helps. Feel free to improve :-)

---

Related Topics