Bootstrap 6 CSS Breakpoint Indicator

Following on from my post last year about Bootstrap 5 CSS Breakpoint Indicator, here’s a snippet for Bootstrap 6 (Alpha). It appears at all times in the bottom left corner of the viewport and as it’s small, partially transparent so it doesn’t distract from the main content. css body::after { aspect-ratio: 1 / 1 !important; backdrop-filter: blur(99px) !important; background-color: rgb(0 0 0 / 0.8) !important; border-radius: 8px !important; bottom: 0.25rem !important; color: #fff !important; content: "XS"; font-family: system-ui, sans-serif !important; font-size: 12px !important; font-weight: normal !important; left: 0.25rem !important; line-height: 1 !important; min-width: 28px !important; opacity: 0.9 !important; padding: 4px !important; pointer-events: none !important; position: fixed !important; text-align: center !important; z-index: 9999 !important; } /* SM ≥576px */ @media (width >= 576px) { body::after { content: "SM"; } } /* MD ≥768px */ @media (width >= 768px) { body::after {…