A simple SCSS snippet for debugging Bootstrap breakpoints.

breakpoint-debugging.scss

body {
    &::before {
      @include pseudo($content: "xs");
      @include position(fixed, $bottom: 0, $right: 0, $z-index: $zindex-modal);
      @include size(40px);
      line-height: 40px;
      text-align: center;
      background-color: #000;
      color: #fff;
      font-size: 2rem;
      border: 1px solid #fff;
      border-width: 1px 0 0 1px;

      @include media-breakpoint-up(sm) {
        content: "sm";
      }

      @include media-breakpoint-up(md) {
        content: "md";
      }
      
      @include media-breakpoint-up(lg) {
        content: "lg";
      }
      
      @include media-breakpoint-up(xl) {
        content: "xl";
      }            
    }
  }
  
// Positioning mixin

@mixin position($position: absolute, $top: null, $right: null, $bottom: null, $left: null, $z-index: null) {
  @if $position != null {
    position: $position;
  }

  @if $top != null {
    top: $top;
  }

  @if $right != null {
    right: $right;
  }

  @if $bottom != null {
    bottom: $bottom;
  }

  @if $left != null {
    left: $left;
  }

  @if $z-index != null {
    z-index: $z-index;
  }
}


// Add basic declarations for creating pseudo-elements
@mixin pseudo($content: "", $display: block) {
  content: $content;
  display: $display;
}