Skip to main content

Visibility examples

Current breakpoint

Back to top

Using the responsive visibility classes, the active breakpoint is shown in green below. Resize your device to see this change.

Extra Small Active breakpoint Extra Small
Small Active breakpoint Small
Medium Active breakpoint Medium
Large Active breakpoint Large
Extra Large Active breakpoint Extra Large
Full HD Active breakpoint Full HD

Visible classes

Back to top

The table below shows which .bsk-visible- classes are visible at each responsive breakpoint. Visible combinations are shown in green. The active breakpoint is also indicated in the table header.

bsk-Extra Small Active breakpoint Extra Small Small Active breakpoint Small Medium Active breakpoint Medium Large Active breakpoint Large Extra Large Active breakpoint Extra Large Extra Large Active breakpoint Extra Large
.visible-xs-* Visible Hidden Hidden Hidden Hidden Hidden
.visible-sm-* Hidden Visible Hidden Hidden Hidden Hidden
.visible-md-* Hidden Hidden Visible Hidden Hidden Hidden
.visible-lg-* Hidden Hidden Hidden Visible Hidden Hidden
.visible-xl-* Hidden Hidden Hidden Hidden Visible Hidden
.visible-fhd-* Hidden Hidden Hidden Hidden Hidden Visible

Hidden classes

Back to top

The table below shows which .bsk-hidden- classes are hidden at each responsive breakpoint. Hidden combinations are shown in green. The active breakpoint is also indicated in the table header.

bsk-Extra Small Active breakpoint Extra Small Small Active breakpoint Small Medium Active breakpoint Medium Large Active breakpoint Large Extra Large Active breakpoint Extra Large Extra Large Active breakpoint Extra Large
.hidden-xs Hidden Visible Visible Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible Visible Visible
.hidden-md Visible Visible Hidden Visible Visible Visible
.hidden-lg Visible Visible Visible Hidden Visible Visible
.hidden-xl Visible Visible Visible Visible Hidden Visible
.hidden-fhd Visible Visible Visible Visible Visible Hidden