<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<h2>Detect Your Current Viewport Context</h2>
<p>This small CSS snippet will display your current viewport (<code>xs</code>, <code>sm</code>, <code>md</code> or <code>lg</code>) context when using Bootstrap. It can be useful for testing responsive sites, or demoing responsive behaviors on different viewports. Hope it helps someone out there!</p>
<pre>
body::before {
content: "xs";
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
background-color: #000;
color: #fff;
}
@media (min-width : 768px) { body::before { content: "sm"; }}
@media (min-width : 992px) { body::before { content: "md"; }}
@media (min-width : 1200px) { body::before { content: "lg"; }}
</pre>
<div class="alert alert-info" role="alert">
Notice the little back box in the upper left corner of the page? Change the width of your browser window and see it in action!
</div>
</div>
</div>
</div>
