CSS Visibility

There are some CSS classes that you can use out of the box for common functionality.

Class NameDescription
disabledCursor is changed to notify a ‘disable’ and opacity is set to a lower value.
hiddenSet display to none. Compare with below - the class hidden means the element will not show and will not take up space in the layout.
invisibleSet visibility to hidden. Compare with above - the class invisible means the element will not show, but it will still take up space in the layout.
transparentBackground color is transparent.
dimmedApply dark transparent overlay on top of your element. Do not use on elements which already have :after pseudoelement.
light-dimmedApply white transparent overlay on top of your element. Do not use on elements which already have :after pseudoelement.
ellipsisTruncates text and shows ellipsis when not enough space available.
ellipsis-2-linesTruncates text and shows ellipsis when not enough space available on two lines (works only on Webkit browsers).
ellipsis-3-linesTruncates text and shows ellipsis when not enough space available on three lines (works only on Webkit browsers).
z-topPositions your element on top of any other component, but behind Popovers, Tooltips, Notifications.
z-maxPositions your element on top of any other component (including Drawer, Modals, Notifications, Layout header/footer, …)

First of all, let’s define what the breakpoints are:

Window SizePrefixWidth threshold in pixels
Extra SmallxsUp to 599px
SmallsmUp to 1023px
MediummdUp to 1439px
LargelgUp to 1919px
Extra LargexlBigger than 1920px

Now on to the window width related CSS classes.

Class NameDescription
xsDisplay only on extra small windows
smDisplay only on small windows
mdDisplay only on medium-sized windows
lgDisplay only on large windows
xlDisplay only on extra large windows

You can also show some DOM element or component if it’s lower than one of the sizes. Same for greater than one of the sizes. Just attach lt- or gt- prefixes, which come from “lower than” and “greater than”. Example: lt-md (display on xs and sm only), lt-xl (display on xs, sm, md and lg windows only), gt-md (display on greater than medium windows: lg and xl).

TIP

You can combine the visibility classes with the inline class for inline-blocks.

Example: <span class="gt-sm inline">...</span>

Visible only on:

Class NameDescription
desktop-onlyVisible only on desktop
mobile-onlyVisible only on mobile
native-mobile-onlyVisible only on Cordova/Capacitor
cordova-onlyVisible only on Cordova wrapped Apps
capacitor-onlyVisible only on Cordova wrapped Apps
electron-onlyVisible only on Electron wrapped Apps
touch-onlyVisible only on touch capable platforms
platform-ios-onlyVisible only on an iOS platform
platform-android-onlyVisible only on an Android platform
within-iframe-onlyVisible only when entire website is under an IFRAME tag

Hide on:

Class NameDescription
desktop-hideHide on desktop
mobile-hideHide on mobile
native-mobile-hideHide on Cordova/Capacitor
cordova-hideHide on Cordova wrapped Apps
capacitor-hideHide on Cordova wrapped Apps
electron-hideHide on Electron wrapped Apps
touch-hideHide on touch capable platforms
platform-ios-hideHide on iOS platform
platform-android-hideHide on Android platform
within-iframe-hideHide only when entire website is under an IFRAME tag

TIP

Based on your needs, you might want to also check Platform Detection page to see how you can achieve the same effect using Javascript. This latter method allows you to not even render a DOM element or component. It is useful when the rendering process is expensive.

Class NameDescription
orientation-portraitVisible only when screen orientation is Portrait
orientation-landscapeVisible only when screen orientation is Landscape
Class NameDescription
print-onlyVisible only on print media - hidden on screen media
print-hideVisible on screen media - hidden on print media