Global Modifiers

Alter the styling of any element with these modifiers

Display

These modifiers will alter the display and visibility CSS properties of an element.

is-block Sets the display property to block.
is-inline-block Sets the display property to inline-block.
is-flex Sets the display property to flex.
is-inline-flex Sets the display property to inline-flex.
is-inline Sets the display property to inline.
is-hidden Sets the display property to none.
is-invisible Sets the visibility property to hidden.

Removing Style

These modifiers are intended to remove specific styling from elements.

has-no-padding Sets the padding property to 0.
has-no-padding-top Sets the padding-top property to 0.
has-no-padding-bottom Sets the padding-bottom property to 0.
has-no-padding-left Sets the padding-left property to 0.
has-no-padding-right Sets the padding-right property to 0.
has-no-margin Sets the margin property to 0.
has-no-border Sets the border property to none.
has-no-shadow Sets the box-shadow property to none.
has-no-wrap Sets the white-space property to nowrap.

Text

These modifiers will alter the text-align and font-weight CSS properties of an element.

has-text-left Sets the text-align property to left.
has-text-right Sets the text-align property to right.
has-text-center Sets the text-align property to center.
has-font-normal Sets the font-weight property to normal.
has-font-bold Sets the font-weight property to bold.

Alignment

These modifiers give you control over content alignment by using flexbox, float and margins.

is-margin-center Sets the margin property to 0 auto.
is-vertically-centered Sets:
  • display to flex
  • flex-direction to column
  • justify-content to center
is-float-left Sets the float property to left.
is-float-right Sets the float property to right.
has-start Sets the justify-content property to flex-start.
has-centered Sets the justify-content property to center.
has-end Sets the justify-content property to flex-end.

Responsive

These modifiers enable you to display and hide elements based on screen size.

is-mobile-only The element will only be viewable on a small (mobile) viewport.
is-tablet-only The element will only be viewable on a medium (tablet) viewport.
is-tablet-up The element will be viewable on a medium and bigger viewports.
is-tablet-down The element will be viewable on a medium and smaller viewports.
is-desktop-only The element will only be viewable on a large (desktop) viewport.
is-desktop-up The element will be viewable on a large and bigger viewports.
is-desktop-down The element will be viewable on a large and smaller viewports.
is-desktop-x-only The element will only be viewable on a extra large viewport.