Bootstrap 3 Viewport Helper

Ganz einfach die BS3 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.

<body>

<!-- ... -->

<!--Bootstrap Viewport-Anzeige direkt in der Seite:-->
<div class="visible-lg viewporter">LARGE</div>
<div class="visible-md viewporter">MEDIUM</div>
<div class="visible-sm viewporter">SMALL</div>
<div class="visible-xs viewporter">X-SMALL</div>
<style>
.viewporter {
position: fixed;
left: 50%;
margin-left: -125px;
top: 75px;
width: 250px;
text-align: center;
font-size: 20px;
border: 2px solid red;
z-index: 10000;
}
</style>

</body>