css • Bootstrap Grid - martindubenet/wed-dev-design GitHub Wiki
[ Bootstrap v.4.4 ][ Bootstrap v.5 ][ Grid & Breakpoints ]
| Description | sass maps | xs | sm | md | lg | xl | xxl |
|---|---|---|---|---|---|---|---|
| Default variables values | - | 0 |
576px |
768px |
992px |
1200px |
1400px |
| Viewport pixels size | $grid-breakpoints |
0 ≥ 575.9 | 576 ≥ 767.9 | 768 ≥ 991.9 | 992 ≥ 1199.9 | 1200 ≥ 1399.9 | 1400 ≥ ∞ |
| Container’s row inner width | $container-max-widths |
Elastic | 540px | 720px | 960px | 1140px | 1320px |
xxlbreakpoints is available by default only since v.5
It does create a bigger file to load but extending Bootstrap variables and mixins within our own Sass gives us a lot more tools to work faster while making sure that all the same colors and fonts are used throughout the app.
Imported from npm bootstrap
@import '../../node_modules/bootstrap/scss/_bootstrap-grid.scss'
-
Columns and gutters
$grid-columns: 12 !default;$grid-gutter-width: 1.5rem !default;
-
Maps
$grid-breakpoints: (…);$container-max-widths: (…);
| Sass mixin | Compiled CSS (default values) |
|---|---|
| @include make-container(); | padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; |
| @include make-col(); | |
| @include media-breakpoint-up(sm) { … } | @media (min-width: 576px) { … } |
| @include media-breakpoint-down(sm) { … } | @media (max-width: 575.9px) { … } |
| @include media-breakpoint-only(sm) { … } | @media (min-width: 576px) and (max-width: 767.9px) { … } |
// bootstrap v.5
.example {
@include media-breakpoint-down(sm) {
@include make-col(12);
}
@include media-breakpoint-up(sm) {
@include make-col(6);
}
}
// bootstrap v.4
.example {
@include media-breakpoint-down(sm) {
@include make-col(12);
}
@include media-breakpoint-up(sm) {
@include make-col(6);
}
}.example { @extend .row !optional; }.example { @extend .col !optional; }
Default compiled Bootstrap Grid (v.5.1.1) available from CDN ready to be copy/pasted within your HTML <head>:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">