diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 6f680664ca67..92d96957d530 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -1,12 +1,20 @@
{
"files": [
+ {
+ "path": "./dist/css/bootstrap-debugger.css",
+ "maxSize": "0.75 kB"
+ },
+ {
+ "path": "./dist/css/bootstrap-debugger.min.css",
+ "maxSize": "0.75 kB"
+ },
{
"path": "./dist/css/bootstrap-grid.css",
- "maxSize": "6.5 kB"
+ "maxSize": "7.0 kB"
},
{
"path": "./dist/css/bootstrap-grid.min.css",
- "maxSize": "6.0 kB"
+ "maxSize": "6.25 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
diff --git a/README.md b/README.md
index f7fa824f3797..d547e1a27e2b 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,14 @@ Within the download you'll find the following directories and files, logically g
```text
bootstrap/
├── css/
+ │ ├── bootstrap-debugger.css
+ │ ├── bootstrap-debugger.css.map
+ │ ├── bootstrap-debugger.min.css
+ │ ├── bootstrap-debugger.min.css.map
+ │ ├── bootstrap-debugger.rtl.css
+ │ ├── bootstrap-debugger.rtl.css.map
+ │ ├── bootstrap-debugger.rtl.min.css
+ │ ├── bootstrap-debugger.rtl.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
diff --git a/scss/_debug.scss b/scss/_debug.scss
new file mode 100644
index 000000000000..c39f154785c0
--- /dev/null
+++ b/scss/_debug.scss
@@ -0,0 +1,52 @@
+@if $enable-debugger-classes {
+ %grid-debug {
+ position: relative;
+
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1999;
+ pointer-events: none;
+ content: "";
+ background: repeating-linear-gradient(to right, transparent, transparent calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc(100% / 12)); // stylelint-disable-line function-disallowed-list
+ opacity: .3;
+ }
+ }
+
+ .#{$prefix}debug-grids {
+ &::before {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 2000;
+ padding: .5em 1em;
+ font-family: $font-family-base;
+ color: $black;
+ background-color: $white;
+ border-radius: 0 0 4px; // stylelint-disable-line property-disallowed-list
+ @include font-size(var(--#{$prefix}debug-label-font-size, $h1-font-size));
+ }
+
+ @each $breakpoint, $value in $grid-breakpoints {
+ @include media-breakpoint-up($breakpoint) {
+ &::before {
+ content: "#{$breakpoint}";
+ }
+ }
+ }
+
+ [class^="container"],
+ &[class^="container"],
+ .row,
+ &.row {
+ @extend %grid-debug;
+ }
+ }
+
+ .#{$prefix}debug-grid-cols {
+ @extend %grid-debug;
+ }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9db91c73a159..df1e582dfce6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -383,6 +383,7 @@ $enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
+$enable-debugger-classes: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
diff --git a/scss/bootstrap-debugger.scss b/scss/bootstrap-debugger.scss
new file mode 100644
index 000000000000..4005ab759141
--- /dev/null
+++ b/scss/bootstrap-debugger.scss
@@ -0,0 +1,7 @@
+$enable-debugger-classes: true !default;
+
+@import "functions";
+@import "variables";
+@import "mixins";
+
+@import "debug";
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 52bd577e3ae5..7f70780049e1 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -58,5 +58,6 @@ $utilities: map-get-multiple(
"padding-start",
)
);
+@import "debug";
@import "utilities/api";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 449d704878fa..6e1134cb4131 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -46,6 +46,7 @@
// Helpers
@import "helpers";
+@import "debug";
// Utilities
@import "utilities/api";
diff --git a/site/content/docs/5.3/customize/options.md b/site/content/docs/5.3/customize/options.md
index e2da964cdf1a..ddbd51ba4208 100644
--- a/site/content/docs/5.3/customize/options.md
+++ b/site/content/docs/5.3/customize/options.md
@@ -25,6 +25,7 @@ You can find and customize these variables for key global options in Bootstrap's
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-button-pointers` | `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" >}}). |
+| `$enable-debugger-classes` | `true` or `false` (default) | Enables the use of `.bs-grid-debug` class. You can use it on any html element and it will highlight its children grids (`.row` and `.container-*`). It also displays the living breakpoint depending on the viewport. |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
diff --git a/site/content/docs/5.3/getting-started/contents.md b/site/content/docs/5.3/getting-started/contents.md
index b53bffc740de..62b3c57acc5b 100644
--- a/site/content/docs/5.3/getting-started/contents.md
+++ b/site/content/docs/5.3/getting-started/contents.md
@@ -15,6 +15,14 @@ Once downloaded, unzip the compressed folder and you'll see something like this:
```text
bootstrap/
├── css/
+│ ├── bootstrap-debugger.css
+│ ├── bootstrap-debugger.css.map
+│ ├── bootstrap-debugger.min.css
+│ ├── bootstrap-debugger.min.css.map
+│ ├── bootstrap-debugger.rtl.css
+│ ├── bootstrap-debugger.rtl.css.map
+│ ├── bootstrap-debugger.rtl.min.css
+│ ├── bootstrap-debugger.rtl.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
@@ -72,6 +80,7 @@ Bootstrap includes a handful of options for including some or all of our compile
| CSS files | Layout | Content | Components | Utilities |
| --- | --- | --- | --- | --- |
| `bootstrap.css`
`bootstrap.min.css`
`bootstrap.rtl.css`
`bootstrap.rtl.min.css` | Included | Included | Included | Included |
+| `bootstrap-debugger.css`
`bootstrap-debugger.rtl.css`
`bootstrap-debugger.min.css`
`bootstrap-debugger.rtl.min.css` | [Only debug classes]({{< docsref "/customize/options" >}}) | — | — | — |
| `bootstrap-grid.css`
`bootstrap-grid.rtl.css`
`bootstrap-grid.min.css`
`bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
| `bootstrap-utilities.css`
`bootstrap-utilities.rtl.css`
`bootstrap-utilities.min.css`
`bootstrap-utilities.rtl.min.css` | — | — | — | Included |
| `bootstrap-reboot.css`
`bootstrap-reboot.rtl.css`
`bootstrap-reboot.min.css`
`bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — |