Bootstrap 5 Breakpoints informer

WTaddBootstrap5BreakpointsInformer.js

    window.WTaddBootstrap5BreakpointsInformer = (event)=> {
        console.log('window.innerWidth = '+window.innerWidth);
        console.log('document.documentElement.clientWidth = '+document.documentElement.clientWidth);
        let span = document.getElementById('WTaddBootstrap5BreakpointsInformer');
        let span2 = document.getElementById('WTaddBootstrap5BreakpointsInformer-resolution');
        span2.innerText = document.documentElement.clientWidth;

        if(document.documentElement.clientWidth < 576){
            span.innerText = 'None';
        } else if(document.documentElement.clientWidth >= 576 && document.documentElement.clientWidth < 768) {
            span.innerText = 'SM';
        } else if(document.documentElement.clientWidth >= 768 && document.documentElement.clientWidth < 992) {
            span.innerText = 'MD';
        } else if(document.documentElement.clientWidth >= 992 && document.documentElement.clientWidth < 1200) {
            span.innerText = 'LG';
        } else if(document.documentElement.clientWidth >= 1200 && document.documentElement.clientWidth < 1400) {
            span.innerText = 'XL';
        } else if(document.documentElement.clientWidth >= 1400) {
            span.innerText = 'XXL';
        }

    }

    let div = document.createElement('div');
    div.style = 'position:fixed; z-index: 50000; bottom: 100px; left:10px; background-color: #7330FA; color: #fff; font-size: 14px; padding: 8px; border-radius: 25%; border: 1px solid #fff; box-shadow: 2px 2px 10px rgba(0,0,0,0.5); display:flex; flex-direction: column; align-items: center;';
    document.body.append(div);
    let span = document.createElement('span');
    span.id = 'WTaddBootstrap5BreakpointsInformer'
    let span2 = document.createElement('span');
    span2.style = 'font-size: 10px;'
    span2.id = 'WTaddBootstrap5BreakpointsInformer-resolution'
    div.append(span);
    div.append(span2);
    document.addEventListener('DOMContentLoaded', (event) => {
        window.WTaddBootstrap5BreakpointsInformer(event);
    });

    window.addEventListener('scroll', (event) => {
        window.WTaddBootstrap5BreakpointsInformer(event);
    });
    window.addEventListener('resize', (event) => {
        window.WTaddBootstrap5BreakpointsInformer(event);
    });

Js-скрипт Bootstrap breakpoints informer в помощь верстальщику на Bootstrap

Добавьте этот скрипт в index.php своего шаблона и сбоку экрана появится небольшой маркер, который будет отображать какой диапазон разрешений Bootstrap 5 (breakpoints) сейчас на вашем экране: SM, MD, LG, XL или XXL.
Может быть использовано не только на Joomla сайтах. После окончания разработки не забудьте удалить этот скрипт.