Display
- src
- utilities
- display.scss
Class list
- .flex
- .block
- .inline
- .inline-block
- .absent
- .invisible
- .flex-(breakpoint)
- .block-(breakpoint)
- .inline-(breakpoint)
- .inline-block-(breakpoint)
- .absent-(breakpoint)
- .invisible-(breakpoint)
Description
Use the display utility classes to override the display type for an element.
Absent
The .absent class is an abstraction on display: none;. Reduce the width of your browser to see the example in action.
small breakpoint
medium breakpoint
large breakpoint
<div class="text-center mb-2">
<p class="absent-md absent-lg">small breakpoint</p>
<p class="absent-sm absent-lg">medium breakpoint</p>
<p class="absent-sm absent-md">large breakpoint</p>
</div>Invisible
Use the .invisible class to set visibility: hidden; on an element. Reduce the width of your browser to see the example in action.
<div class="clearfix mb-2">
<figure class="square x3 primary mr-1 invisible-sm to-left"></figure>
<figure class="square x3 info mr-1 invisible-md to-left"></figure>
<figure class="square x3 danger mr-1 invisible-lg to-left"></figure>
</div>