"Detect Viewport Context"
Bootstrap 3.3.0 Snippet by Schmalzy

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

Similar snippets: See More


Comments:

Henrique 2015-03-07 21:19:56
    Very useful. Thank you.
Matthew Hailwood 2015-03-30 11:30:03
    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.

Commenting will be back soon.