Skip to content

Instantly share code, notes, and snippets.

@folbert
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.
Display current Bootstrap v4 size on screen
/*
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}';
}
}
}
@frebro
Copy link

frebro commented Mar 22, 2017

@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