Responsive display classes for Bootstrap

_display.scss

// Needs Bootstrap Variables, Functions, & Mixins
// @import "../../node_modules/bootstrap/scss/functions";
// @import "../../node_modules/bootstrap/scss/variables";
// @import "../../node_modules/bootstrap/scss/mixins";

@mixin display-1 {
  font-size: $display1-size;
  font-weight: $display1-weight;
  line-height: $display-line-height;
}

@mixin display-2 {
  font-size: $display2-size;
  font-weight: $display2-weight;
  line-height: $display-line-height;
}

@mixin display-3 {
  font-size: $display3-size;
  font-weight: $display3-weight;
  line-height: $display-line-height;
}

@mixin display-4 {
  font-size: $display4-size;
  font-weight: $display4-weight;
  line-height: $display-line-height;
}

@include media-breakpoint-up(sm) {
  .display-sm-1 {
    @include display-1;
  }

  .display-sm-2 {
    @include display-2;
  }

  .display-sm-3 {
    @include display-3;
  }

  .display-sm-4 {
    @include display-4;
  }
}

@include media-breakpoint-up(md) {
  .display-md-1 {
    @include display-1;
  }

  .display-md-2 {
    @include display-2;
  }

  .display-md-3 {
    @include display-3;
  }

  .display-md-4 {
    @include display-4;
  }
}

@include media-breakpoint-up(lg) {
  .display-lg-1 {
    @include display-1;
  }

  .display-lg-2 {
    @include display-2;
  }

  .display-lg-3 {
    @include display-3;
  }

  .display-lg-4 {
    @include display-4;
  }
}

@include media-breakpoint-up(xl) {
  .display-xl-1 {
    @include display-1;
  }

  .display-xl-2 {
    @include display-2;
  }

  .display-xl-3 {
    @include display-3;
  }

  .display-xl-4 {
    @include display-4;
  }
}