HTML: Bootstrap Viewport Debugger Overlay

Beim Klick auf den Overlay Button unten (Der Auch den aktuellen Viewport und die Bildschirmbreite anzeigt), können Sie die Containeransicht visualisieren. Dies hilft, dass bei der Entwicklung sich ordentlich an die Containerbreiten gehalten werden kann.

 

<div id="sd"
     style="position: fixed;bottom: 50px;left: 50px;width: 60px;height: 50px;border: 3px solid red;z-index: 9999999;background: #fff;opacity: 0.5;">
    <style nonce="{f:security.nonce()}">
        span.vp {
            color: black;
            width: 100%;
            font-size: 30px;
            line-height: 30px;
            margin-bottom: -4px;
            text-align: center;
        }

        #bg {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            pointer-events: none;
        }

        #bg.shw {
            display: block;
        }

        #bg .row > div span {
            display: block;
            height: 16.66vh;
            width: 100%;
            background: #f57f7f9e;
        }

        #wd {
            text-align: center;
            color: #d01414;
            text-shadow: 1px 0px black;
        }
    </style>

    <span class="vp d-block d-sm-none">XS</span>
    <span class="vp d-none d-sm-block d-md-none">SM</span>
    <span class="vp d-none d-md-block d-lg-none">MD</span>
    <span class="vp d-none d-lg-block d-xl-none">LG</span>
    <span class="vp d-none d-xl-block d-xxl-none">XL</span>
    <span class="vp d-none d-xxl-block">XXL</span>

    <div id="wd" class="d-flex align-items-center justify-content-center" style="font-size: 14px;"></div>

    <div id="bg">
        <div class="container">

            <div class="row"><div class="col-12"><span></span></div></div>

            <div class="row">
                <div class="col-1"><span></span></div><div class="col-1"><span></span></div>
                <div class="col-1"><span></span></div><div class="col-1"><span></span></div>
                <div class="col-1"><span></span></div><div class="col-1"><span></span></div>
                <div class="col-1"><span></span></div><div class="col-1"><span></span></div>
                <div class="col-1"><span></span></div><div class="col-1"><span></span></div>
                <div class="col-1"><span></span></div><div class="col-1"><span></span></div>
            </div>

            <hr>

            <div class="row">
                <div class="col-2"><span></span></div><div class="col-2"><span></span></div>
                <div class="col-2"><span></span></div><div class="col-2"><span></span></div>
                <div class="col-2"><span></span></div><div class="col-2"><span></span></div>
            </div>

            <hr>

            <div class="row">
                <div class="col-3"><span></span></div><div class="col-3"><span></span></div>
                <div class="col-3"><span></span></div><div class="col-3"><span></span></div>
            </div>

            <hr>

            <div class="row">
                <div class="col-4"><span></span></div><div class="col-4"><span></span></div>
                <div class="col-4"><span></span></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" nonce="{f:security.nonce()}">
    // Toggle visibility of the grid
    const sd = document.getElementById('sd');
    const bg = document.getElementById('bg');
    const wd = document.getElementById('wd');

    const tg = () => bg.classList.toggle('shw');

    // Display current window width
    const uw = () => wd.innerText = window.innerWidth + 'px';

    sd.addEventListener('click', tg);
    window.addEventListener('resize', uw);
    document.addEventListener('DOMContentLoaded', uw);
</script>

Der Code kann einfach Copy & Pasted werden und ist sofort einsatzbereit.