Skip to content

Instantly share code, notes, and snippets.

@maxdmyers

maxdmyers/bootstrap-size-indicator.html

Created October 14, 2016 15:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maxdmyers/bffeb70100d808ce8405435c4aa60416 to your computer and use it in GitHub Desktop.
Save maxdmyers/bffeb70100d808ce8405435c4aa60416 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Screen Size Indicator
Raw
bootstrap-size-indicator.html
<!-- FOR DEV USE ONLY - DO NOT USE IN PRODUCTION -->
<div class="hidden-sm-up bg-danger" style="position: relative; z-index: 100;">
<div class="container p-t-1"><p class="text-xs-center">XS</p></div>
</div>
<div class="hidden-xs-down hidden-md-up bg-warning" style="position: relative; z-index: 100;">
<div class="container p-t-1"><p class="text-sm-center">SM</p></div>
</div>
<div class="hidden-sm-down hidden-lg-up bg-success" style="position: relative; z-index: 100;">
<div class="container p-t-1"><p class="text-md-center">MD</p></div>
</div>
<div class="hidden-md-down hidden-xl-up bg-info" style="position: relative; z-index: 100;">
<div class="container p-t-1"><p class="text-lg-center">LG</p></div>
</div>
<div class="hidden-lg-down bg-primary" style="position: relative; z-index: 100;">
<div class="container p-t-1"><p class="text-xl-center">XL</p></div>
</div>
<!-- FOR DEV USE ONLY - DO NOT USE IN PRODUCTION -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment