Bootstrap V4 Grid Sizes/Sass List

Customize Bootstrap 4's grid-system Breakpoints

Bootstrap 4.x & 5.x

You need to override the $grid-breakpoints and $container-max-widths variables BEFORE importing the Bootstrap sources. Here a working example (scss):

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);
    
$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1610px
);
    
// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?

You can make a custom mixin to regenerate the appropriate breakpoint columns inside the custom container...

@mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // only override lg and up
    @include media-breakpoint-up('lg', $breakpoints) {
      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          padding-right: ($gutter / 2);
          padding-left: ($gutter / 2);
          @include make-col($i, $columns);
        }
      }

    }
  }
}

@import "bootstrap";

$foreground-container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1428px
);

/* make the container for the custom grid */
.foreground-container > .container {
    @include make-container();
    @include make-container-max-widths($foreground-container-max-widths, $grid-breakpoints);
}

.foreground-container {
    /*  custom col for all breakpoints */
    @include make-grid-columns(6, 3px, $grid-breakpoints);

    /* override lg and up using custom mixin */
    @include make-grid-columns-custom(15, 6px, $grid-breakpoints);
}

Demo: https://www.codeply.com/go/SLmHas8zEZ

Related: Define different number of Bootstrap 4 columns for some part (div) of page only?

How to create new breakpoints in bootstrap 4 using CDN?

I'm very surprised that there was no developer able to answer my question! Even on the github no one dared to think about it!

In fact, everything turned out to be very simple!

Yes, using the CDN we get the compiled css file. Styles in the bootstrap are written using sass. Moreover, the styles are written separation and modular. So it means that I do not need to load the entire bootstrap to my server. I want to deliver cached version of Bootstrap’s compiled CSS and I only need to add my breakpoints. Fortunately, there is a specific bootstrap file which is responsible for the Grid. It is bootstrap-grid.scss:

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@at-root {
  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

Now I just need to add sequentially the code from the files above adding my breakpoints. Add non-Grid code not necessary. For example, the code responsible for the color. Here is my mcve at codepen.

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 - understanding $grid-breakpoints and $container-max-widths

You are looking for the difference between the grid and a container.

If you set the grid xl breakpoint to 1200px and the container-max-width to 1140px, it simply means you will have a white space of 30px on each side of the container.

example image

If you do not want this white space, use .container-fluid instead.

https://getbootstrap.com/docs/4.4/layout/overview/#containers

See also this fiddle: https://jsfiddle.net/Sirence/v07Lynqo/7/

Creating custom grid number (24) for Bootstrap 4

$grid-columns is a SASS variable. You can use SASS to change the grid to 24 columns like this...

$grid-columns:           24;
$grid-gutter-width-base: 15px;

@import "bootstrap";

Demo https://codeply.com/go/C0Uh7PokEl

The variable names have change slightly as of Bootstrap 4.0.0:

$grid-columns:      24;
$grid-gutter-width: 12px;

@import "bootstrap";

Also see: How to get bootstrap 4 24 grid

Bootstrap 4 Customizer

Calculate with Bootstrap container width in Sass

$container-max-widths is a list of values mapped to the keys (sm,md,lg,xl).
You need to get a value from the xl key of $container-max-widths.

Example for xl you need this:

.is-style-container-50 {
    max-width: map-get($container-max-widths , xl) / 2;
}

To use all the breakpoints you need to cycle trough all the list:

@each $size-name in map-keys($container-max-widths){
    $size-value: map-get($container-max-widths , $size-name);
    .is-style-container-50 {
        @include media-breakpoint-up($size-name){
            max-width: $size-value / 2;
        }
    }
}

You can also build another list with 50% of values and use it with the Bootstrap mixin for add max-widths to his containers make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints):

$container-mid-max-widths: (
  sm: #{map-get($container-max-widths, sm)*0.5},
  md: #{map-get($container-max-widths, md)*0.5},
  lg: #{map-get($container-max-widths, lg)*0.5},
  xl: #{map-get($container-max-widths, xl)*0.5}
);

.mid-container {
    // Using Bootstrap Mixin: make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
    @include make-container-max-widths( $container-mid-max-widths , $grid-breakpoints );
}