Breakpoint-specific versions of Bootstrap's text/left/text-right classes

_text.scss

// Text alignment - like Bootstrap's text-left/text-right classes, but breakpoint-specific
// Usage: .text-right-sm, .text-left-md etc.
@mixin make-text-left($breakpoint) {
    .text-left-#{$breakpoint} {
        text-align: left !important;
    }
}
@mixin make-text-right($breakpoint) {
    .text-right-#{$breakpoint} {
        text-align: right !important;
    }
}
@mixin make-text-center($breakpoint) {
    .text-center-#{$breakpoint} {
        text-align: center !important;
    }
}

// Extra small grid
@media (min-width: 0px) and (max-width: $screen-xs-max) {
    @include make-text-left(xs);
    @include make-text-right(xs);
    @include make-text-center(xs);
}

// Small grid
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @include make-text-left(sm);
    @include make-text-right(sm);
    @include make-text-center(sm);
}

// Medium grid
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @include make-text-left(md);
    @include make-text-right(md);
    @include make-text-center(md);
}

// Large grid
@media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    @include make-text-left(lg);
    @include make-text-right(lg);
    @include make-text-center(lg);
}

// Extra-large grid
@media (min-width: $screen-xl-min) {
    @include make-text-left(xl);
    @include make-text-right(xl);
    @include make-text-center(xl);
}