component

Display

Utilities for controlling the display box type of an element. Breakpoints modifiers

Class	Properties
`is-flex`	display: flex
`is-grid`	display: grid
`is-block`	display: block
`is-inline`	display: inline
`is-inline-flex`	display: inline-flex
`is-inline-grid`	display: inline-grid
`is-inline-block`	display: inline-block
`is-hidden`	display: none

Basic usage:

Combined with breakpoints modiffiers: is-block as default, is-grid on mobile and is-flex larger screens.

  <div class="is-block sm:is-grid md:is-flex gap-xs">
    <div class="box has-text-center has-shadow-xs is-text-sm bg-violet color-white">
      Box 1
    </div>
    <div class="box has-text-center has-shadow-sm is-text-sm bg-violet color-white">
      Box 2
    </div>
    <div class="box has-text-center has-shadow-sm is-text-sm bg-violet color-white">
      Box 3
    </div>
    <div class="box has-text-center has-shadow-sm is-text-sm bg-violet color-white">
      Box 4
    </div>
  </div>

Box 1

Box 2

Box 3

Box 4

Resize your browser to see this behavior.