Skip to content

Commit 532feab

Browse files
MartijnCuppensMartijnCuppens
authored
Split grid & containers (#29146)
1 parent aa95f6d commit 532feab

File tree

10 files changed

+135
-132
lines changed

10 files changed

+135
-132
lines changed

‎scss/_containers.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// Container widths
2+
//
3+
// Set the container width, and override it for fixed navbars in media queries.
4+
5+
@if $enable-grid-classes {
6+
// Single container class with breakpoint max-widths
7+
.container {
8+
@include make-container();
9+
@include make-container-max-widths();
10+
}
11+
12+
// 100% wide container at all breakpoints
13+
.container-fluid {
14+
@include make-container();
15+
}
16+
17+
// Responsive containers that are 100% wide until a breakpoint
18+
@each $breakpoint, $container-max-width in $container-max-widths {
19+
.container-#{$breakpoint} {
20+
@extend .container-fluid;
21+
}
22+
23+
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
24+
%responsive-container-#{$breakpoint} {
25+
max-width: $container-max-width;
26+
}
27+
28+
// Extend each breakpoint which is smaller or equal to the current breakpoint
29+
$extend-breakpoint: true;
30+
31+
@each $name, $width in $grid-breakpoints {
32+
@if ($extend-breakpoint) {
33+
.container#{breakpoint-infix($name, $grid-breakpoints)} {
34+
@extend %responsive-container-#{$breakpoint};
35+
}
36+
37+
// Once the current breakpoint is reached, stop extending
38+
@if ($breakpoint == $name) {
39+
$extend-breakpoint: false;
40+
}
41+
}
42+
}
43+
}
44+
}
45+
}

‎scss/_grid.scss

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,3 @@
1-
// Container widths
2-
//
3-
// Set the container width, and override it for fixed navbars in media queries.
4-
5-
@if $enable-grid-classes {
6-
// Single container class with breakpoint max-widths
7-
.container {
8-
@include make-container();
9-
@include make-container-max-widths();
10-
}
11-
12-
// 100% wide container at all breakpoints
13-
.container-fluid {
14-
@include make-container();
15-
}
16-
17-
// Responsive containers that are 100% wide until a breakpoint
18-
@each $breakpoint, $container-max-width in $container-max-widths {
19-
.container-#{$breakpoint} {
20-
@extend .container-fluid;
21-
}
22-
23-
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
24-
%responsive-container-#{$breakpoint} {
25-
max-width: $container-max-width;
26-
}
27-
28-
// Extend each breakpoint which is smaller or equal to the current breakpoint
29-
$extend-breakpoint: true;
30-
31-
@each $name, $width in $grid-breakpoints {
32-
@if ($extend-breakpoint) {
33-
.container#{breakpoint-infix($name, $grid-breakpoints)} {
34-
@extend %responsive-container-#{$breakpoint};
35-
}
36-
37-
// Once the current breakpoint is reached, stop extending
38-
@if ($breakpoint == $name) {
39-
$extend-breakpoint: false;
40-
}
41-
}
42-
}
43-
}
44-
}
45-
}
46-
47-
481
// Row
492
//
503
// Rows contain your columns.

‎scss/_mixins.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,5 @@
3838

3939
// Layout
4040
@import "mixins/clearfix";
41-
@import "mixins/grid-framework";
41+
@import "mixins/container";
4242
@import "mixins/grid";

‎scss/bootstrap-grid.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ html {
1919
@import "variables";
2020

2121
@import "mixins/breakpoints";
22-
@import "mixins/grid-framework";
22+
@import "mixins/container";
2323
@import "mixins/grid";
2424
@import "mixins/utilities";
2525

26+
@import "containers";
2627
@import "grid";
2728

2829
@import "utilities";

‎scss/bootstrap.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import "reboot";
2020
@import "type";
2121
@import "images";
22+
@import "containers";
2223
@import "grid";
2324
@import "tables";
2425
@import "forms";

‎scss/mixins/_container.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Container mixins
2+
3+
@mixin make-container($padding-x: $container-padding-x) {
4+
width: 100%;
5+
padding-right: $padding-x;
6+
padding-left: $padding-x;
7+
margin-right: auto;
8+
margin-left: auto;
9+
}
10+
11+
12+
// For each breakpoint, define the maximum width of the container in a media query
13+
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
14+
@each $breakpoint, $container-max-width in $max-widths {
15+
@include media-breakpoint-up($breakpoint, $breakpoints) {
16+
max-width: $container-max-width;
17+
}
18+
}
19+
}

‎scss/mixins/_grid-framework.scss

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎scss/mixins/_grid.scss

Lines changed: 65 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,6 @@
22
//
33
// Generate semantic grid columns with these mixins.
44

5-
@mixin make-container($padding-x: $container-padding-x) {
6-
width: 100%;
7-
padding-right: $padding-x;
8-
padding-left: $padding-x;
9-
margin-right: auto;
10-
margin-left: auto;
11-
}
12-
13-
14-
// For each breakpoint, define the maximum width of the container in a media query
15-
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
16-
@each $breakpoint, $container-max-width in $max-widths {
17-
@include media-breakpoint-up($breakpoint, $breakpoints) {
18-
max-width: $container-max-width;
19-
}
20-
}
21-
}
22-
235
@mixin make-row($gutter: $grid-gutter-width) {
246
display: flex;
257
flex-wrap: wrap;
@@ -67,3 +49,68 @@
6749
max-width: 100% / $count;
6850
}
6951
}
52+
53+
// Framework grid generation
54+
//
55+
// Used only by Bootstrap to generate the correct number of grid classes given
56+
// any value of `$grid-columns`.
57+
58+
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
59+
// Common properties for all breakpoints
60+
%grid-column {
61+
position: relative;
62+
width: 100%;
63+
padding-right: $gutter / 2;
64+
padding-left: $gutter / 2;
65+
}
66+
67+
@each $breakpoint in map-keys($breakpoints) {
68+
$infix: breakpoint-infix($breakpoint, $breakpoints);
69+
70+
// Allow columns to stretch full width below their breakpoints
71+
@for $i from 1 through $columns {
72+
.col#{$infix}-#{$i} {
73+
@extend %grid-column;
74+
}
75+
}
76+
.col#{$infix},
77+
.col#{$infix}-auto {
78+
@extend %grid-column;
79+
}
80+
81+
@include media-breakpoint-up($breakpoint, $breakpoints) {
82+
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
83+
.col#{$infix} {
84+
flex-basis: 0;
85+
flex-grow: 1;
86+
min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
87+
max-width: 100%;
88+
}
89+
90+
@for $i from 1 through $grid-row-columns {
91+
.row-cols#{$infix}-#{$i} {
92+
@include row-cols($i);
93+
}
94+
}
95+
96+
.col#{$infix}-auto {
97+
@include make-col-auto();
98+
}
99+
100+
@for $i from 1 through $columns {
101+
.col#{$infix}-#{$i} {
102+
@include make-col($i, $columns);
103+
}
104+
}
105+
106+
// `$columns - 1` because offsetting by the width of an entire row isn't possible
107+
@for $i from 0 through ($columns - 1) {
108+
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
109+
.offset#{$infix}-#{$i} {
110+
@include make-col-offset($i, $columns);
111+
}
112+
}
113+
}
114+
}
115+
}
116+
}

‎site/content/docs/4.3/getting-started/theming.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ You can find and customize these variables for key global options in Bootstrap's
267267
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
268268
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
269269
| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
270-
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
270+
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
271271
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
272272
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
273273
| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |

‎site/content/docs/4.3/migration.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ Changes to our source Sass files and compiled CSS.
3737
- Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
3838
- Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
3939
- The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
40+
- `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146](https://github.com/twbs/bootstrap/pull/29146)
4041
- Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271)
4142
- The `button-variant()` mixin now accepts 3 optional color parameters, for each button state, to override the color provided by `color-yiq()`. By default, these parameters will find which color provides more contrast against the button state's background color with `color-yiq()`.
4243
- The `button-outline-variant()` mixin now accepts an additional argument, `$active-color`, for setting the button's active state text color. By default, this parameter will find which color provides more contrast against the button's active background color with `color-yiq()`.

0 commit comments

Comments
 (0)