skip to Main Content

Is there a way, to customizing grid gutters in each breakpoints?

I know, that Twitter pay dollars of millions to make Bootstrap v4 perfect and I don’t want to reform everything in a day, but I’m just curious, that is there a way to make my custom gutters, not just only one.

Like: I want the gutter at large size to be 30px , but on smaller devices I want it to be 24px and on mobile 20px

3

Answers


  1. You can add your custom gutter like this :

    .row.custom-gutter {
      margin-left: 30px;
      margin-right: 30px;
    }
    
    [class^='col'].custom-gutter,
    [class*=' col'].custom-gutter {
      padding-left: 30px;
      padding-right: 30px;
    }
    

    And then you’ll have to update the padding on smaller devices with media queries.

    Login or Signup to reply.
  2. You need to go on your-folder/node_modules/bootstrap/scss/_variables.scss and search :

    // Grid columns
    //
    // Set the number of columns and specify the width of the gutters.
    
    $grid-columns:                  12 !default;
    $grid-gutter-width-base:        30px !default;
    $grid-gutter-widths: (
      xs: $grid-gutter-width-base,
      sm: $grid-gutter-width-base,
      md: $grid-gutter-width-base,
      lg: $grid-gutter-width-base,
      xl: $grid-gutter-width-base
    ) !default;
    

    You can also change the breakpoints :

    // Grid breakpoints
    //
    // Define the minimum dimensions at which your layout will change,
    // adapting to different screen sizes, for use in media queries.
    
    $grid-breakpoints: (
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    ) !default;
    @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
    @include _assert-starts-at-zero($grid-breakpoints);
    
    Login or Signup to reply.
  3. I’ve just made a package that allows the customisation of the gutters and container margins per break-point: https://github.com/BenceSzalai/bootstrap-responsive-grid

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search