Bootstrap 4 Change Breakpoints

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

Is it possible to set custom breakpoints in Bootstrap 4 just by editing the CSS files?

Your question is very similar to How to create new breakpoints in bootstrap 4 using CDN?

"Is it possible to set custom breakpoints in Bootstrap 4 just by editing the CSS files?"

Yes, but it would require adding a lot of CSS to support the new breakpoints. Each breakpoint is referenced more than 280 times in the Bootstrap CSS. Therefore, adding 2 new breakpoints would add more than 500 new classes to the CSS. Remember that the breakpoints aren't just used for the grid col-*, the breakpoints are also used for many other responsive features like the flexbox, alignment & display utilities.

"I have added --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; directly after --breakpoint-xl:1200px; in the boostrap.min.css file"

These are CSS variables. The CSS variables can used if you want to reference them in a @media query, but they're not going to magically add new classes for the new breakpoints.

"I would like to set 2 additional breakpoints in Bootstrap 4 for 1366px and 1920px"

This would be done using SASS as explained here. The SASS gets compiled to CSS. You would just add the grid-breakpoints. The generated CSS would contain all of the new col-xxl-*, col-xxxl-*, etc.. and all of the other responsive classes and media queries as explained above.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1366px,
  xxxl: 1920px
);

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

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.

How to add custom breakpoints in bootstrap4 and how to use responsive breakpoint mixins in scss

You can add a new xxl breakpoint like this. Make sure you @import bootstrap after setting the custom grid-breakpoints...

@import "bootstrap/functions";
@import "bootstrap/variables";

$grid-breakpoints: (
  xs: 0,
  sm: 567px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1900px
);

$container-max-widths: (
  sm: 567px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1900px
);

 @import "bootstrap";

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

Then the appropriate xxl-* classes will be generated...

@media (min-width: 1900px) {
    .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

For the custom mixin classes, define those after you @import bootstrap...

@import "bootstrap";

span.work_catalog {
    @include media-breakpoint-up(xxl) { 
       border:1px solid red;
    }
}

Demo: https://www.codeply.com/go/jus43PxWAU (notice the demo sets the xxl breakpoint as 1366px) so when the screen is wider than xxl, .work_catalog has the expected red border.

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

bootstrap change flex direction at certain breakpoints?

solved it, it seems bootstrap handles the xs breakpoint by not including a breakpoint value in the class utility

<div class="d-flex flex-column flex-lg-row justify-content-around">

this works

---

Related Topics