Bulma CSS - Responsive

---

Bulma CSS Framework Tutorial

Bulma CSS - Profile
Bulma CSS - start
Bulma CSS - CSS class
Bulma CSS - Modular
Bulma CSS - Responsive

---

Bulma is a responsive support framework on computers, mobile phones, flat-panel screens of various sizes can be the perfect rendering the page.

Phone displays

Bulma is optimized for the mobile phone display:

• columns, levelEtc. will be vertically aligned horizontal layout displayed on the phone
• navNavigation menu is folded on the phone

If you want to force your phone to display a horizontal layout, you can give columns, levelplus is-mobilemodifiers.

Screen boundaries

Five Bulma predetermined screen width boundaries, distinguish between different types of screens:

• mobile / cell phone: <= 768px
• tablet / tablet: 769px ~ 1023px
• desktop / Desktop: 1024px ~ 1215px
• widescreen / Widescreen: 1216px ~ 1407px
• fullhd / full-screen HD:> = 1408px

Disable some screen boundaries

By default, Sass source code $widescreen-enabledand $fullhdscreen boundaries are enabled, disabled can be modified as follows:

// Disable the widescreen breakpoint
$widescreen-enabled: false

// Disable the fullhd breakpoint
$fullhd-enabled: false

SASS variables

In SASS source code, some of the variables related reactive support defined as follows:

variable name	Types of	Default true	Calculated
$gap	size	64px
$tablet	size	769px
$desktop	computed	960px + (2 * $gap)
$widescreen	computed	1152px + (2 * $gap)
$fullhd	computed	1344px + (2 * $gap)