4 breakpoints from 769px to 1408px. Bulma names its tiers after devices. The gap between tablet (769px) and desktop (1024px) is intentional — Bulma treats 769px as "not mobile".
| Name | Value | Pixels | Media query | Devices ≥ |
|---|---|---|---|---|
mobile | 0 | — | (up to 768px) | 242 |
tablet | 769px | 769 | @media screen and (min-width: 769px) | 89 |
desktop | 1024px | 1024 | @media screen and (min-width: 1024px) | 63 |
widescreen | 1216px | 1216 | @media screen and (min-width: 1216px) | 53 |
fullhd | 1408px | 1408 | @media screen and (min-width: 1408px) | 38 |
Configuration
// Override before importing Bulma
$tablet: 769px;
$desktop: 1024px;
$widescreen: 1216px;
$fullhd: 1408px;How Bulma compares
| Framework | Unit | 480 | 576 | 600 | 640 | 768 | 992 | 1024 | 1200 | 1280 | 1440 | 1536 | 1600 | 1920 | Only here |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tailwind CSS | rem | · | · | · | sm | md | · | lg | · | xl | · | 2xl | · | · | — |
| Bootstrap | px | · | sm | · | · | md | lg | · | xl | · | · | · | · | · | 1400 xxl |
| MUI (Material UI) | px | · | · | sm | · | · | · | · | lg | · | · | xl | · | · | 900 md |
| Bulma | px | · | · | · | · | · | · | desktop | · | · | · | · | · | · | 769 tablet, 1216 widescreen, 1408 fullhd |
| Foundation | em | · | · | · | medium | · | · | large | xlarge | · | xxlarge | · | · | · | — |
| Chakra UI | em | sm | · | · | · | md | lg | · | · | xl | · | 2xl | · | · | — |
| Ant Design | px | · | sm | · | · | md | lg | · | xl | · | · | · | xxl | · | — |
| Vuetify | px | · | · | sm | · | · | · | · | · | lg | · | · | · | xl | 960 md, 2560 xxl |
| Material Design 3 | dp | · | · | Medium | · | · | · | · | Large | · | · | · | Extra-large | · | 840 Expanded |
| Open Props | em | --sm | · | · | · | --md | · | --lg | · | · | --xl | · | · | --xxl | 240 --xxs, 384 --xs |
Questions
What are the default Bulma breakpoints?
Bulma v1.0 ships 5 tiers: mobile (0px), tablet (769px), desktop (1024px), widescreen (1216px), fullhd (1408px).
Are Bulma breakpoints min-width or max-width?
Bulma is mobile-first, so every breakpoint is a min-width query. Styles apply from that width upward.
How do I change the Bulma breakpoints?
Override them in the configuration — see the snippet on this page. Changing them is usually a mistake unless you have a concrete layout reason; the defaults are chosen to sit between real device clusters.
Why does Bulma use px?
Pixel breakpoints are predictable and map directly to device widths, which makes them easy to reason about — at the cost of ignoring the user's font-size preference.