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-blockis-flexis-inlineis-inline-blockis-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
|
Can't find a component?
Let us know what you need and we’ll be happy to look into it
Request component