Display

Overview

Helper classes to customise how an element is displayed.


Element height in vh units

Class CSS Attribute
is-vh-10 height: 10vh;
is-vh-20 height: 20vh;
is-vh-30 height: 30vh;
is-vh-40 height: 40vh;
is-vh-50 height: 50vh;
is-vh-60 height: 60vh;
is-vh-70 height: 70vh;
is-vh-80 height: 80vh;
is-vh-90 height: 90vh;
is-vh-100 height: 100vh;

Margin and padding

Replace margin with padding in the table below to control padding.

Class CSS Attribute
margin margin: 1rem;
margin--{size} margin: .25rem; (xs)
margin: .5rem; (sm)
margin: 2rem; (lg)
margin: 4rem; (xl)
margin--{direction} margin-top: 1rem; (top)
margin-right: 1rem; (right)
margin-bottom: 1rem; (bottom)
margin-left: 1rem; (left)
margin--{direction}--{size} Combination as derived from above

CSS display attributes

You can use one of the following classes to set your display CSS attribute:

  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-inline-flex

Example on how is-flex works:

Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-flex flex unchanged unchanged unchanged unchanged
is-flex-mobile unchanged flex unchanged unchanged unchanged
is-flex-desktop-only unchanged unchanged flex unchanged unchanged
is-flex-widescreen-only unchanged unchanged unchanged flex unchanged

Helper classes to display element for different screensizes

Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-flex-touch flex flex unchanged unchanged unchanged
is-flex-tablet unchanged flex flex flex flex
is-flex-desktop unchanged unchanged flex flex flex
is-flex-widescreen unchanged unchanged unchanged flex flex
is-flex-fullhd unchanged unchanged unchanged unchanged flex

For the other display options, replace is-flex with is-block, is-inline, is-inline-block or is-inline-flex. For example, is-inline-block-fullhd.


Hiding content for different displays

Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-hidden-mobile hidden visible visible visible visible
is-hidden-tablet-only visible hidden visible visible visible
is-hidden-desktop-only visible visible hidden visible visible
is-hidden-widescreen-only visible visible visible hidden visible

Helper classes to hide element for different screensizes

Class Mobile Up to 768px Tablet between 768px to 1023px Desktop between 1024px to 1215px Widescreen between 1216px to 1407px FullHD from 1408px and above
is-hidden-touch hidden hidden visible visible visible
is-hidden-tablet visible hidden hidden hidden hidden
is-hidden-desktop visible visible hidden hidden hidden
is-hidden-widescreen visible visible visible hidden hidden
is-hidden-fullhd visible visible visible visible hidden

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team