Skip to content

Instantly share code, notes, and snippets.

@jonnymaceachern
Last active April 8, 2023 11:17
Show Gist options
  • Save jonnymaceachern/a1d4c8d4e432f54d471e7ad816c9240c to your computer and use it in GitHub Desktop.
Save jonnymaceachern/a1d4c8d4e432f54d471e7ad816c9240c to your computer and use it in GitHub Desktop.
Always display current breakpoint using Bootstrap 4's media breakpoint SCSS variables
body {
&:after {
content: "< #{map-get($grid-breakpoints, sm)} (xs)";
position: fixed;
z-index: 99999;
padding: 2px 15px;
bottom: 0;
left: 0;
border-top-right-radius: 5px;
background: blue;
font-size: 14px;
color: #fff;
font-weight: bold;
@include media-breakpoint-up(sm) {
content: "#{map-get($grid-breakpoints, sm)} <---> #{map-get($grid-breakpoints, md) - 1} (sm)";
background: green;
}
@include media-breakpoint-up(md) {
content: "#{map-get($grid-breakpoints, md)} <---> #{map-get($grid-breakpoints, lg) - 1} (md)";
background: yellow;
color: #000;
}
@include media-breakpoint-up(lg) {
content: "#{map-get($grid-breakpoints, lg)} <---> #{map-get($grid-breakpoints, xl) - 1} (lg)";
background: orange;
color: #fff;
}
@include media-breakpoint-up(xl) {
content: "> #{map-get($grid-breakpoints, xl)} (xl)";
background: red;
color: #fff;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment