Show current Bootstrap breakpoint as overlay on top of the page

debug-breakpoint.scss

/*

 Add this to the page:
 <divid="breakpoint-debug"><spanclass="xs">xs</span><spanclass="sm">sm</span><spanclass="md">md</span><spanclass="lg">lg</span><spanclass="xl">xl</span><spanclass="xxl">xxl</span></div>
  Sizes: https://getbootstrap.com/docs/5.0/layout/breakpoints/
*/
#breakpoint-debug {
    // display:none;
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
    background: black;
    color: cornsilk;
    opacity: 0.7;
    text-align: center;
    span {
        &::before {
            content: '-';
        }
        display: none;
    }
    @media (max-width: 575.8px) {
        span.xs {
            display: inline-block;
        }
    }
    @media (min-width: 576px) and (max-width: 767.8px) {
        span.sm {
            display: inline-block;
        }
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
        span.md {
            display: inline-block;
        }
    }
    @media (min-width: 992px) and (max-width: 1199.98px) {
        span.lg {
            display: inline-block;
        }
    }
    @media (min-width: 1200px) and (max-width: 1399.8px) {
        span.xl {
            display: inline-block;
        }
    }
    @media (min-width: 1400px) {
        span.xxl {
            display: inline-block;
        }
    }
}