Bootstrap 4 Viewport Helper

Ganz einfach die BS4 Viewports live debuggen

Einfach den folgenden Code direkt vor dem schließenden body-Tag platzieren. Nach dem Einfügen wird dir auf deiner Seite ein Hinweis angezeigt, in welchem Bootstrap-Viewport du dich aktuell befindest.

Während du das Fenster in der Größe veränderst, wird der Viewport automatisch aktualisiert.

<!--Bootstrap Viewport-Anzeige direkt in der Seite:-->

<div id="size-debugger-bs4" style="position: fixed;bottom: 50px;left: 50px;width: 60px;height: 50px;border: 3px solid red;z-index: 9999999;background: #fff;opacity: 0.5;">

        <style> span.naderio-vp-bs4 {width: 100%;font-size: 30px;line-height: 40px;text-align: center;}</style>

        <span class="naderio-vp-bs4 d-block d-sm-none">XS</span>

        <span class="naderio-vp-bs4 d-none d-sm-block d-md-none">SM</span>

        <span class="naderio-vp-bs4 d-none d-md-block d-lg-none">MD</span>

        <span class="naderio-vp-bs4 d-none d-lg-block d-xl-none">LG</span>

        <span class="naderio-vp-bs4 d-none d-xl-block">XL</span>

</div>