Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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}';
}
}
}
@folbert

This comment has been minimized.

Copy link
Owner Author

commented Mar 22, 2017

bootstrap

@frebro

This comment has been minimized.

@unicornist

This comment has been minimized.

Copy link

commented Feb 20, 2019

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
You can’t perform that action at this time.