How to Add Custom Breakpoints in Bootstrap4 and How to Use Responsive Breakpoint Mixins in SCSS

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.

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.

Using media breakpoints in Bootstrap 4-alpha

Update: Bootstrap 5.

v5 breakpoints reference


Original answer - Bootstrap v4: Use breakpoint mixins like this:

.something {
padding: 5px;
@include media-breakpoint-up(sm) {
padding: 20px;
}
@include media-breakpoint-up(md) {
padding: 40px;
}
}

v4 breakpoints reference

v4 alpha6 breakpoints reference


Below full options and values.

Breakpoint & up (toggle on value and above):

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

breakpoint & up values:

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

breakpoint & down (toggle on value and down):

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

breakpoint & down values:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

breakpoint only:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

breakpoint only values (toggle in between values only):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

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?



Related Topics



Leave a reply



Submit