See what Boostrap screen mode you are currently viewing

Working with a responsive framework such as Bootstrap, you build websites to display differently depending on the screen size. Bootstrap defines four screen widths that determine what “mode” you are in (xs, sm, md and lg). But it’s not always obvious what mode you are viewing. For this I put together a small piece of CSS that can be dropped into any project during development. It will display a label in the top left corner that shows the mode you are currently viewing. Here is a demo. Resize the window to see the label change!

screen mode label

This is the CSS. The screen sizes are based on Bootstrap 3 but can easily be changes to any kind of framework.

Note: The screen widths above are hard coded pixel sizes, so this CSS does not depend on any framework. To the right of each @media I have written the corresponsing Bootstrap LESS variable (@screen-xx). Replace the ###px with the variable to make sure it is always correct.

This entry was posted in Development, Tips and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *