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
My iPhone Thinks It's 980Px Wide
How to Add Horizontal Padding to Every Line in One Multi-Line Wrapped Sentence
Flexbox: Move Middle Element to The Next Line
Need to Make Curve Line Using CSS
CSS Table and Max-Width in Chrome Not Working
Select Second Active Slide in Slickslider Through CSS-Selector
CSS Selector for a Child Element Whose Parent Element Has a Certain Class
Putting Buttons and Links Over Particles.Js Script (Z-Index)
How to Change -Webkit-Scrollbar Width When Hover on It
How to Specify The System's Default Serif and Sans-Serif Font-Family
Display:Flex Not Working in Chrome
Image Align Attribute in HTML 5
CSS: Multiple Attribute Selectors
How to Work Around The Need for Bootstrap 3's Form-Control Class
How to Change The Font of Some Textoutput Elements
CSS - Internet Explorer and The <Main> Tag Background
Why Is There Excessive Whitespace with Facebook Mobile Comments Plugin