Skip to content

Instantly share code, notes, and snippets.

@folbert

folbert/_display-bootstrap-size.scss

Last active December 29, 2021 17:43
Show Gist options
  • Save folbert/085e7c171e46f489ce2b64b3bec9b036 to your computer and use it in GitHub Desktop.
Save folbert/085e7c171e46f489ce2b64b3bec9b036 to your computer and use it in GitHub Desktop.
Download ZIP
Display current Bootstrap v4 size on screen
Raw
_display-bootstrap-size.scss
/*
Inspired by https://www.viget.com/articles/check-your-breakpoint-using-this-simple-css-snippet
*/
body:after {
color: #000;
font-family: Helvetica;
font-size: 12px;
padding: 5px;
font-weight: bold;
right: 10px;
position: fixed;
text-align: center;
text-transform: uppercase;
bottom: 10px;
width: 200px;
z-index: 9999;
background: #c0c0c0;
border: solid 1px #000;
@each $name, $value in $grid-breakpoints {
@include media-breakpoint-up($name) {
content: '#{$name} - min-width: #{$value}';
}
}
}
@folbert
Copy link
Author

folbert commented Mar 22, 2017

bootstrap

@frebro
Copy link

frebro commented Mar 22, 2017

Nice one. Foundation has a similar approach using <meta>.

Injection of the tag:
https://github.com/zurb/foundation-sites/blob/5168d1f02ce8a95590f0e8f99d0d6c7a29b527e9/dist/js/plugins/foundation.core.js#L265-L267

Styling values as CSS content:
https://github.com/zurb/foundation-sites/blob/develop/scss/_global.scss#L115-L118

@unicornist
Copy link

After finding your snippet and not finding what I was looking for, I just made it. here it is for those who are looking for a sample bootstrap way of finding bootstrap breakpoints : https://codepen.io/Unicornist/pen/WPWaBP

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment