You are viewing the deprecated 0.8.1 version of the website. Click here to view the latest version

Responsive helpers

Show/hide content depending on the width of the viewport


Show #

You can use one of the following display classes:

  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-inline-flex

For example, here's how the is-flex helper works:

Class Mobile
Up to 768px
Tablet
Between 769px and 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
is-flex-mobile

flex

unchanged

unchanged

unchanged

unchanged

is-flex-tablet-only

unchanged

flex

unchanged

unchanged

unchanged

is-flex-desktop-only

unchanged

unchanged

flex

unchanged

unchanged

is-flex-widescreen-only

unchanged

unchanged

unchanged

flex

unchanged

Classes to display up to or from a specific breakpoint

is-flex-touch

flex

flex

unchanged

unchanged

unchanged

is-flex-tablet

unchanged

flex

flex

flex

flex

is-flex-desktop

unchanged

unchanged

flex

flex

flex

is-flex-widescreen

unchanged

unchanged

unchanged

flex

flex

is-flex-fullhd

unchanged

unchanged

unchanged

unchanged

flex

For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex


Hide #

Class Mobile
Up to 768px
Tablet
Between 769px and 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
is-hidden-mobile

hidden

visible

visible

visible

visible

is-hidden-tablet-only

visible

hidden

visible

visible

visible

is-hidden-desktop-only

visible

visible

hidden

visible

visible

is-hidden-widescreen-only

visible

visible

visible

hidden

visible

Classes to hide up to or from a specific breakpoint

is-hidden-touch

hidden

hidden

visible

visible

visible

is-hidden-tablet

visible

hidden

hidden

hidden

hidden

is-hidden-desktop

visible

visible

hidden

hidden

hidden

is-hidden-widescreen

visible

visible

visible

hidden

hidden

is-hidden-fullhd

visible

visible

visible

visible

hidden

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!