"Detect Viewport Context"
Bootstrap 3.3.0 Snippet by Schmalzy

<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>
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"; }}

Related: See More

Featured Templates


Questions / Comments:

I actually have a far more complete version of this which does things like tell you the container size, what the min/max are for the current container size, current viewport size etc - unfortunately it requires the sass version of bootstrap as it reads from the size variables to make it dynamic.

Matthew Hailwood () - 3 years ago - Reply -1


Very useful. Thank you.

Henrique () - 3 years ago - Reply 0