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

Documentation

Everything you need to create a website with Bulma

# Responsiveness

## Bulma is a mobile-first framework

### Vertical by default

Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile:

- `columns` are stacked vertically
- the `level` component will show its children stacked vertically
- the `nav` menu will be hidden

For example, you can enforce the horizontal layout for both `columns` or `nav` by appending the `is-mobile` modifer.

### Breakpoints

Bulma has 5 breakpoints:

- `mobile`: up to `768px`
- `tablet`: from `769px`
- `desktop`: from `1008px`
- `widescreen`: from `1200px`
- New! `fullhd`: from `1392px`

Bulma uses 9 responsive mixins:

- `=mobile`
  until `768px`
- `=tablet`
  from `769px`
- `=tablet-only`
  from `769px` and until `1007px`
- `=touch`
  until `1007px`
- `=desktop`
  from `1008px`
- `=desktop-only`
  from `1008px` and until `1199px`
- `=widescreen`
  from `1200px`
- `=widescreen-only`
  from `1200px` and until `1391px`
- New! `=fullhd`
  from `1392px`

Mobile Up to `768px` | Tablet Between `769px` and `1007px` | Desktop Between `1008px` and `1199px` | Widescreen Between `1200px` and `1391px` | FullHD `1392px` and above
--- | --- | --- | --- | ---
mobile | -
- | tablet
- | desktop
- | widescreen
- | fullhd
- | tablet-only | -
- | desktop-only | -
- | widescreen-only | -
touch | -

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!