Display

properties

Class

ClassAttribute
display--nonedisplay: none
display--blockdisplay: block
display--inline-blockdisplay: inline-block
display--inlinedisplay: inline
display--flexdisplay: flex
display--inline-flexdisplay: inline-flex

responsive

Our responsive classes take a mobile-first approach by either showing or hiding elements at specified viewports. The classes are broken down by using show or hide and applying a viewport suffix such as :tablet or :desktop.

For example, if you wanted to start displaying an element at the laptop screen size, you would add hide show:laptop. The hide class adds display: none which affects all screen sizes. Whereas the show:laptop class adds display: block at the respected media query. On the flip side, if you wanted to hide an element at the laptop resolution, you owuld simply add hide:laptop. It might help to think of these classes from the “mobile-first” approach.

Class

ClassResult
show-print

Show on printed media.

hide-print

Hide on printed media.

show

Show at all screen sizes.

show:tablet

Show at our tablet breakpoint and up.

show:lg-tablet

Show at our large tablet breakpoint and up.

show:laptop

Show Show at our laptop breakpoint and up.

show:desktop

Show at our desktop breakpoint and up.

hide

Hide on all screen sizes.

hide:tablet

Hide on our tablet breakpoint and up.

hide:lg-tablet

Hide on our large tablet breakpoint and up.

hide:laptop

Hide on our laptop breakpoint and up.

hide:desktop

Hide on our desktop breakpoint and up.