Visible/invisible classes, outside Bootstrap's usual breakpoints

visibility.less

// Complements Bootstrap's hidden/visible classes, but working between 0 and 479px
.visible-xxs {
  .responsive-invisibility();
}
.visible-xxs-block,
.visible-xxs-inline,
.visible-xxs-inline-block {
    display: none !important;
}
.hidden-xxs {
    @media screen and (max-width: @screen-xss-max) { // Up to 479px
        .responsive-invisibility();
    }
}

.visible-xxs {
    @media screen and (max-width: @screen-xss-max) { // Up to 479px
        .responsive-visibility();
    }
}
.visible-xxs-inline {
    @media screen and (max-width: @screen-xss-max) { // Up to 479px
        display: inline !important;
    }
}
.visible-xxs-inline-block {
    @media screen and (max-width: @screen-xss-max) { // Up to 479px
        display: inline-block !important;
    }
}

// Bootstrap's xs hidden/visible target 0px to 767px
// Redefine this to work with the above xxs breakpoint
.hidden-xs {
    @media (min-width: @screen-xs) and (max-width: @screen-xs-max) {
        .responsive-invisibility();
    }
}
.visible-xs,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-block {
    @media screen and (max-width: @screen-xss-max) { // Up to 479px
        body & {
            .responsive-invisibility();
        }
    }
}
.visible-xs {
    @media (min-width: @screen-xs) and (max-width: @screen-xs-max) {
        .responsive-visibility();
    }
}
.visible-xs-block {
    @media (min-width: @screen-xs) and (max-width: @screen-xs-max) {
        display: block !important;
    }
}
.visible-xs-inline {
    @media (min-width: @screen-xs) and (max-width: @screen-xs-max) {
        display: inline !important;
    }
}
.visible-xs-inline-block {
    @media (min-width: @screen-xs) and (max-width: @screen-xs-max) {
        display: inline-block !important;
    }
}

// Same again for our new XL breakpoint
.visible-xl {
    .responsive-invisibility();
}
.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block {
    display: none !important;
}
.visible-xl {
    @media (min-width: @screen-xl-min) {
        .responsive-visibility();
    }
}
.visible-xl-block {
    @media (min-width: @screen-xl-min) {
        display: block !important;
    }
}
.visible-xl-inline {
    @media (min-width: @screen-xl-min) {
        display: inline !important;
    }
}
.visible-xl-inline-block {
    @media (min-width: @screen-xl-min) {
        display: inline-block !important;
    }
}
.hidden-lg {
    @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
        .responsive-invisibility();
    }
}
.hidden-xl {
    @media (min-width: @screen-xl-min) {
        .responsive-invisibility();
    }
}

// Bootstrap has no breapoint past lg, so we need to hide lg elements after the new xl breakpoint
// Add 'body' to make these styles more specific than Bootstrap's original 'visible-lg' rules
// (you have to override a !important inside .responsive-invisibility()...)
body {
    .visible-lg,
    .visible-lg-block,
    .visible-lg-inline,
    .visible-lg-inline-block {
        @media (min-width: @screen-xl-min) {
            .responsive-invisibility();
        }
    }
}

// Classes to hide an element without removing it from the DOM (i.e. not using display: none)
.make-visually-hidden(@breakpoint) {
    .visually-hidden-@{breakpoint} {
        visibility: hidden !important;
    }
}

// Extra small grid
@media (min-width: 0) and (max-width: @screen-xs-max) {
    .make-visually-hidden(xs);
}

// Small grid
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .make-visually-hidden(sm);
}

// Medium grid
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .make-visually-hidden(md);
}

// Large grid
@media (min-width: @screen-lg-min) {
    .make-visually-hidden(lg);
}

// Extra-large grid
@media (min-width: @screen-xl-min) {
    .make-visually-hidden(xl);
}