Breakpoint indicator label

[tugrul]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Actually I use following snipped in my projects to figure out which breakpoint is active on viewport. It would be nice opt-in feature like Sass mixin or utility class.

body.breakpoints-label {
  &:before {
    @include border-radius();
    content: "no";
    position: fixed;
    left:2px;
    top:2px;
    padding: 2px 4px;
    font-size:12px;
    line-height: 1em;
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    z-index: 100;
    opacity:0.4;

    @each $name, $size in $grid-breakpoints {
      @media (min-width: $size) {
        content: "#{$name}";
      }
    }
  }
}

Motivation and context

It is hard to understand which breakpoint is active on development phase and it increase development speed when we see active breakpoint's name in the label.