Twitter Bootstrap Question posted in

Bootstrap v4 Beta, customizing gutters – Twitter bootstrap

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

Tags:

3

Answers


  1. 0

    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. 0

    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. 0

    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