Visibility
File location: layout/helpers/_utilities.scss (GitHub)
General Utilities
| Utility Name | CSS Property | Comment |
|---|---|---|
.hide / .display-none |
display: none; | |
.show / .block / .display-block |
display: block; | |
.inline |
display: inline; | |
.inline-block |
display: inline-block; | |
.flow-root |
display: flow-root; | Creates a new block formatting context for the element. Can replace clearfix hacks for floated elements. |
.contents |
display: contents; | |
.invisible / .hidden |
visibility: hidden; | The element is invisible (also to screen readers), but layout is affected as normal. |
.visible |
visibility: visible; | |
.pointer-events-all |
pointer-events: all; | Clicks/taps will be registered even for invisible elements |
.pointer-events-none |
pointer-events: none; | No clicks/taps will be registered |
Responsive Overrides
1. Hide elements from certain viewports
Expand List
2. Show elements on certain viewports
| Utility Name | CSS Property | Comment |
|---|---|---|
.show-desktop.show-desktop-large |
display: block; | Show element from breakpoint and up (wider) |
.show-tablet-landscape.show-tablet-portrait.show-phone-landscape.show-phone |
display: block; | Show element from breakpoint and down (narrower) |
.visible-desktop.visible-desktop-large |
visibility: visible; | Show element from breakpoint and up (wider) |
.visible-tablet-landscape.visible-tablet-portrait.visible-phone-landscape.visible-phone |
visibility: visible; | Show element from breakpoint and down (narrower) |
.f-show-desktop.f-show-desktop-large |
display: flex; | Show flex containers (like unstacked .row) from the breakpoint and up
if they have been hidden with display:none; |
.f-show-tablet-landscape.f-show-tablet-portrait.f-show-phone-landscape.f-show-phone |
display: flex; | Show flex containers (like unstacked .row) from the breakpoint and down
if they have been hidden with display:none; |
3. Hide elements from one specific viewport
phone and desktop-large are excluded. Specific hide utilities for these
are covered by #1 and #2 above.
Expand List
4. Show elements on one specific viewport
phone and desktop-large are excluded. Specific show utilities for these
are covered by #1 and #2 above.
| Utility Name | CSS Property | Comment |
|---|---|---|
.show-desktop-only.show-laptop-only.show-tablet-landscape-only
.show-tablet-portrait-only.show-phone-landscape-only |
display: block; | Show element on this viewport only |
.visible-desktop-only.visible-laptop-only.visible-tablet-landscape-only.visible-tablet-portrait-only.visible-phone-landscape-only |
visibility: visible; | Show element on this viewport only |
.f-show-desktop-only.f-show-laptop-only.f-show-tablet-landscape-only.f-show-tablet-portrait-only.f-show-phone-landscape-only |
display: flex; | Show flex containers (like unstacked .row) on this viewport only, if they have been
hidden with display:none; |
Opacity
Control element opacity with utilities from .opacity-0 to .opacity-100, with intervals of -5.
Here's a red rectangle with 40% opacity:
.opacity-40
Each number is a percentage value from 0% to 100%, where 0 means the element is completely transparent, and 100 means the element is fully
opaque (no transparency). .opacity-35 sets opacity to 0.35, .opacity-70 sets opacity to 0.7,
.opacity-100 sets the css property to opacity: 1;.
Overflow
| Utility Name | CSS Property | Comment |
|---|---|---|
.overflow-hidden |
overflow: hidden; | No scrollbars |
.overflow-scroll |
overflow: scroll; | Always scrollbars, both directions |
.overflow-auto |
overflow: auto; | Scrollbars if needed, both directions |
.overflow-visible |
overflow: visible; | Content can be rendered outside the container if too high/wide |
.overflow-hidden-visible |
overflow: hidden visible; | Vertical scrollbar only, clip content at the bottom |
.overflow-visible-hidden |
overflow: visible hidden; | Horizontal scrollbar only, clip content on the right side and at the bottom if it overflows available height/width |
.overflow-unset |
overflow: unset; | Unsets the overflow property |
.overflow-x-hidden |
overflow-x: hidden; | Clip horizontal content if needed, no scrollbar |
.overflow-x-scroll |
overflow-x: scroll; | Clip horizontal content if needed, allow horizontal scroll |
.overflow-x-auto |
overflow-x: auto; | Horizontal scrollbar if element is too narrow for the content |
.overflow-x-visible |
overflow-x: visible; | Content allowed to be rendered outside the container if too wide |
.overflow-x-unset |
overflow-x: unset; | Unsets the horizontal overflow property |
.overflow-y-hidden |
overflow-y: hidden; | Clip vertical content if needed, no scrollbar |
.overflow-y-scroll |
overflow-y: scroll; | Vertical scrollbar if content needs to be clipped |
.overflow-y-auto |
overflow-y: scroll; | Vertical scrollbar if element is too short for the content |
.overflow-y-visible |
overflow-y: visible; | Content allowed to be rendered outside the container if too high |
.overflow-y-unset |
overflow-y: unset; | Unsets the vertical overflow property |
Overflow Examples
a) Overflow hidden
<div class="overflow-hidden border-gray" style="max-width:40rem; height: 10rem;">
<!-- content ... -->
</div>
This is some overflowing content. Chocolate cake pie chocolate cake ice cream jujubes. Toffee candy tootsie roll.
Gummi bears cupcake oat cake dragée. Halvah soufflé brownie muffin danish muffin brownie jelly gingerbread. Icing
croissant tiramisu sugar plum candy. Danish cheesecake cake. Marzipan brownie candy sweet sugar plum. Pudding sweet
fruitcake cookie pie. Liquorice lemon drops toffee candy. Jelly-o chocolate jelly beans donut wafer bear claw.
Jujubes bear claw chocolate cake biscuit cookie muffin powder pudding. Lemon drops chupa chups cheesecake. Cheesecake
pastry chocolate candy canes liquorice gummi bears. Sugar plum tootsie roll croissant marzipan cheesecake toffee macaroon.
b) Overflow scroll
<div class="overflow-scroll border-gray" style="max-width:40rem; height: 10rem;">
<!-- content can be scrolled both directions -->
</div>
This is some overflowing content on both axes. Very long horizontal overflowing content chocolatecakepiechocolatecakeicecreamjujubestoffee-candy-tootsie-roll.
Gummi bears cupcake oat cake dragée. Halvah soufflé brownie muffin danish muffin brownie jelly gingerbread. Icing croissant
tiramisu sugar plum candy. Danish cheesecake cake. Marzipan brownie candy sweet sugar plum. Pudding sweet
fruitcake cookie pie. Liquorice lemon drops toffee candy. Jelly-o chocolate jelly beans donut wafer bear claw.
Jujubes bear claw chocolate cake biscuit cookie muffin powder pudding. Lemon drops chupa chups cheesecake. Cheesecake
pastry chocolate candy canes liquorice gummi bears. Sugar plum tootsie roll croissant marzipan cheesecake toffee macaroon.
c) Overflow visible-hidden
<div class="overflow-visible-hidden border-gray" style="max-width:40rem; height: 10rem;">
<!-- content can be scrolled horizontally ... -->
</div>
This is some overflowing content on both axes. Very long horizontal overflowing content chocolatecakepiechocolatecakeicecreamjujubestoffee-candy-tootsie-roll.
Gummi bears cupcake oat cake dragée. Halvah soufflé brownie muffin danish muffin brownie jelly gingerbread. Icing croissant
tiramisu sugar plum candy. Danish cheesecake cake. Marzipan brownie candy sweet sugar plum. Pudding sweet
fruitcake cookie pie. Liquorice lemon drops toffee candy. Jelly-o chocolate jelly beans donut wafer bear claw.
Jujubes bear claw chocolate cake biscuit cookie muffin powder pudding. Lemon drops chupa chups cheesecake. Cheesecake
pastry chocolate candy canes liquorice gummi bears. Sugar plum tootsie roll croissant marzipan cheesecake toffee macaroon.
← Previous: Width & Height
Next: Figure →