diff --git a/scss/_containers.scss b/scss/_containers.scss new file mode 100644 index 0000000000..125de8d9b0 --- /dev/null +++ b/scss/_containers.scss @@ -0,0 +1,45 @@ +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +@if $enable-grid-classes { + // Single container class with breakpoint max-widths + .container { + @include make-container(); + @include make-container-max-widths(); + } + + // 100% wide container at all breakpoints + .container-fluid { + @include make-container(); + } + + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @extend .container-fluid; + } + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + %responsive-container-#{$breakpoint} { + max-width: $container-max-width; + } + + // Extend each breakpoint which is smaller or equal to the current breakpoint + $extend-breakpoint: true; + + @each $name, $width in $grid-breakpoints { + @if ($extend-breakpoint) { + .container#{breakpoint-infix($name, $grid-breakpoints)} { + @extend %responsive-container-#{$breakpoint}; + } + + // Once the current breakpoint is reached, stop extending + @if ($breakpoint == $name) { + $extend-breakpoint: false; + } + } + } + } + } +} diff --git a/scss/_grid.scss b/scss/_grid.scss index 57ec5a9d0b..8bcb419e18 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -1,50 +1,3 @@ -// Container widths -// -// Set the container width, and override it for fixed navbars in media queries. - -@if $enable-grid-classes { - // Single container class with breakpoint max-widths - .container { - @include make-container(); - @include make-container-max-widths(); - } - - // 100% wide container at all breakpoints - .container-fluid { - @include make-container(); - } - - // Responsive containers that are 100% wide until a breakpoint - @each $breakpoint, $container-max-width in $container-max-widths { - .container-#{$breakpoint} { - @extend .container-fluid; - } - - @include media-breakpoint-up($breakpoint, $grid-breakpoints) { - %responsive-container-#{$breakpoint} { - max-width: $container-max-width; - } - - // Extend each breakpoint which is smaller or equal to the current breakpoint - $extend-breakpoint: true; - - @each $name, $width in $grid-breakpoints { - @if ($extend-breakpoint) { - .container#{breakpoint-infix($name, $grid-breakpoints)} { - @extend %responsive-container-#{$breakpoint}; - } - - // Once the current breakpoint is reached, stop extending - @if ($breakpoint == $name) { - $extend-breakpoint: false; - } - } - } - } - } -} - - // Row // // Rows contain your columns. diff --git a/scss/_mixins.scss b/scss/_mixins.scss index b4b0ee7634..5a04655d54 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -38,5 +38,5 @@ // Layout @import "mixins/clearfix"; -@import "mixins/grid-framework"; +@import "mixins/container"; @import "mixins/grid"; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index bf609352e4..ed72265a47 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -19,10 +19,11 @@ html { @import "variables"; @import "mixins/breakpoints"; -@import "mixins/grid-framework"; +@import "mixins/container"; @import "mixins/grid"; @import "mixins/utilities"; +@import "containers"; @import "grid"; @import "utilities"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index a2f0554537..dcfdc05cee 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -19,6 +19,7 @@ @import "reboot"; @import "type"; @import "images"; +@import "containers"; @import "grid"; @import "tables"; @import "forms"; diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss new file mode 100644 index 0000000000..67c2f5fdca --- /dev/null +++ b/scss/mixins/_container.scss @@ -0,0 +1,19 @@ +// Container mixins + +@mixin make-container($padding-x: $container-padding-x) { + width: 100%; + padding-right: $padding-x; + padding-left: $padding-x; + margin-right: auto; + margin-left: auto; +} + + +// For each breakpoint, define the maximum width of the container in a media query +@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { + @each $breakpoint, $container-max-width in $max-widths { + @include media-breakpoint-up($breakpoint, $breakpoints) { + max-width: $container-max-width; + } + } +} diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss deleted file mode 100644 index 53e97b44ac..0000000000 --- a/scss/mixins/_grid-framework.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Framework grid generation -// -// Used only by Bootstrap to generate the correct number of grid classes given -// any value of `$grid-columns`. - -@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { - // Common properties for all breakpoints - %grid-column { - position: relative; - width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; - } - - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); - - // Allow columns to stretch full width below their breakpoints - @for $i from 1 through $columns { - .col#{$infix}-#{$i} { - @extend %grid-column; - } - } - .col#{$infix}, - .col#{$infix}-auto { - @extend %grid-column; - } - - @include media-breakpoint-up($breakpoint, $breakpoints) { - // Provide basic `.col-{bp}` classes for equal-width flexbox columns - .col#{$infix} { - flex-basis: 0; - flex-grow: 1; - min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410 - max-width: 100%; - } - - @for $i from 1 through $grid-row-columns { - .row-cols#{$infix}-#{$i} { - @include row-cols($i); - } - } - - .col#{$infix}-auto { - @include make-col-auto(); - } - - @for $i from 1 through $columns { - .col#{$infix}-#{$i} { - @include make-col($i, $columns); - } - } - - // `$columns - 1` because offsetting by the width of an entire row isn't possible - @for $i from 0 through ($columns - 1) { - @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 - .offset#{$infix}-#{$i} { - @include make-col-offset($i, $columns); - } - } - } - } - } -} diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 938b210955..f89ff1e3ee 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -2,24 +2,6 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($padding-x: $container-padding-x) { - width: 100%; - padding-right: $padding-x; - padding-left: $padding-x; - margin-right: auto; - margin-left: auto; -} - - -// For each breakpoint, define the maximum width of the container in a media query -@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { - @each $breakpoint, $container-max-width in $max-widths { - @include media-breakpoint-up($breakpoint, $breakpoints) { - max-width: $container-max-width; - } - } -} - @mixin make-row($gutter: $grid-gutter-width) { display: flex; flex-wrap: wrap; @@ -67,3 +49,68 @@ max-width: 100% / $count; } } + +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. + +@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + // Common properties for all breakpoints + %grid-column { + position: relative; + width: 100%; + padding-right: $gutter / 2; + padding-left: $gutter / 2; + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + // Allow columns to stretch full width below their breakpoints + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @extend %grid-column; + } + } + .col#{$infix}, + .col#{$infix}-auto { + @extend %grid-column; + } + + @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .col#{$infix} { + flex-basis: 0; + flex-grow: 1; + min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410 + max-width: 100%; + } + + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + + .col#{$infix}-auto { + @include make-col-auto(); + } + + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @include make-col($i, $columns); + } + } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + .offset#{$infix}-#{$i} { + @include make-col-offset($i, $columns); + } + } + } + } + } +} diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md index d54d7668dc..07134f373c 100644 --- a/site/content/docs/4.3/getting-started/theming.md +++ b/site/content/docs/4.3/getting-started/theming.md @@ -267,7 +267,7 @@ You can find and customize these variables for key global options in Bootstrap's | `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$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. | -| `$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.). | +| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | | `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). | diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 6783786c78..a46b3e5643 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -37,6 +37,7 @@ Changes to our source Sass files and compiled CSS. - Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339). - Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083) - 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) +- `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146](https://github.com/twbs/bootstrap/pull/29146) - 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) - 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()`. - 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()`.