fix(review)

.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",

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

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;
+  }
+}

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`

scss/bootstrap-debugger.scss

@@ -0,0 +1,7 @@
+$enable-debugger-classes: true !default;
+
+@import "functions";
+@import "variables";
+@import "mixins";
+
+@import "debug";

scss/bootstrap-grid.scss

@@ -58,5 +58,6 @@ $utilities: map-get-multiple(
     "padding-start",
   )
 );
+@import "debug";
 
 @import "utilities/api";

scss/bootstrap.scss

@@ -46,6 +46,7 @@
 
 // Helpers
 @import "helpers";
+@import "debug";
 
 // Utilities
 @import "utilities/api";

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`. |

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`<br> `bootstrap.min.css`<br> `bootstrap.rtl.css`<br> `bootstrap.rtl.min.css` | Included | Included | Included | Included |
+| `bootstrap-debugger.css`<br> `bootstrap-debugger.rtl.css`<br> `bootstrap-debugger.min.css`<br> `bootstrap-debugger.rtl.min.css` | [Only debug classes]({{< docsref "/customize/options" >}}) | — | — | — |
 | `bootstrap-grid.css`<br> `bootstrap-grid.rtl.css`<br> `bootstrap-grid.min.css`<br> `bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
 | `bootstrap-utilities.css`<br> `bootstrap-utilities.rtl.css`<br> `bootstrap-utilities.min.css`<br> `bootstrap-utilities.rtl.min.css` | — | — | — | Included |
 | `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — |