Always display current breakpoint using Bootstrap 4's media breakpoint SCSS variables

_show-bootstrap-breakpoints.scss

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;
		}
	}
}