Responsiveness¶

Use responsiveness element to hide elements on a page for a specific screen width.

Structurally we don't have a script .responsiveness class but rather a few different .hidden classes:

.hidden-xs-only
.hidden-sm-only
.hidden-md-only
.hidden-lg-only
.hidden-xl-only
.hidden-xxl-only
.hidden-xxxl-only

Example¶

Here is an example of responsiveness element usage.

HTML

    <div class="hidden-xs-only hidden-sm-only hidden-md-only">
        This element is visible on a higher resolution
    </div>

    <div class="hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only">
         This element is visible on a lower resolution
    </div>

Responsiveness tags¶

The .hidden classes weren't designed to be used with any specific elements. You can use them with any element according to your own needs.

LESS¶

You can modify any breakpoints in your User Less section. Keep in mind that it will have an effect on all elements that use responsiveness.

Responsiveness variables¶

Variables used as breakpoints.

@breakpointXsName: xs;
@breakpointSmName: sm;
@breakpointMdName: md;
@breakpointLgName: lg;
@breakpointXlName: xl;
@breakpointXxlName: xxl;

@breakPointXs: 576px;
@breakPointSm: 768px;
@breakPointMd: 1000px;
@breakPointLg: 1200px;
@breakPointXl: 1440px;
@breakPointXxl: 1920px;

If you want to change breakpoints, you can just change the variables. To change default xs breakpoint just modify @breakPointXs variable.

@breakPointXs: 400px;

Responsiveness standard styles¶

Here are standard responsiveness styles.

@media (max-width: (@breakPointXs - 1)) {
    .hidden-xs-only {
        display: none !important;
    }
}

@media (min-width: @breakPointXs) and (max-width: (@breakPointSm - 1)) {
    .hidden-sm-only {
        display: none !important;
    }
}

@media (min-width: @breakPointSm) and (max-width: (@breakPointMd - 1)) {
    .hidden-md-only {
        display: none !important;
    }
}

@media (min-width: @breakPointMd) and (max-width: (@breakPointLg - 1)) {
    .hidden-lg-only {
        display: none !important;
    }
}

@media (min-width: @breakPointLg) and (max-width: (@breakPointXl - 1)) {
    .hidden-xl-only {
        display: none !important;
    }
}

@media (min-width: @breakPointXl) and (max-width: (@breakPointXxl - 1)) {
    .hidden-xxl-only {
        display: none !important;
    }
}

@media (min-width: @breakPointXxl) {
    .hidden-xxxl-only {
        display: none !important;
    }
}

@media (min-width: (@breakPointXs)) {
    .visible-xs-only {
        display: none !important;
    }
}