Visibility | hgrid

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

Expand List

Responsive Overrides

1. Hide elements from certain viewports

Utility Name	CSS Property	Comment
`.hide-desktop` `.hide-desktop-large`	display: none;	Hide element from breakpoint and up (wider)
`.hide-tablet-landscape` `.hide-tablet-portrait` `.hide-phone-landscape` `.hide-phone`	display: none;	Hide element from breakpoint and down (narrower)
`.invisible-desktop` `.invisible-desktop-large`	visibility: hidden;	Hide element from breakpoint and up (wider)
`.invisible-tablet-landscape` `.invisible-tablet-portrait` `.invisible-phone-landscape` `.invisible-phone`	visibility: hidden;	Hide element from breakpoint and down (narrower)

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;`

Expand List

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.

Utility Name	CSS Property	Comment
`.hide-desktop-only` `.hide-laptop-only` `.hide-tablet-landscape-only` `.hide-tablet-portrait-only` `.hide-phone-landscape-only`	display: none;	Hide element from this viewport only
`.invisible-desktop-only` `.invisible-laptop-only` `.invisible-tablet-landscape-only` `.invisible-tablet-portrait-only` `.invisible-phone-landscape-only`	visibility: hidden;	Hide element from this viewport only

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;`

Expand List

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

Expand List

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.