Bulma Responsiveness

Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework.

In this article, we will know about Bulma Responsive. Bulma is a component-rich, mobile-first CSS framework based on flexbox. Since Bulma is a mobile-first framework, it supports the following responsiveness features:

• Vertical by default: The Bulma columns are stacked vertically on top of each other, the children of the level component are also shown vertically on mobile devices and the navigation menu is also hidden on mobile devices by default.
• Breakpoints: Bulma supports 5 Breakpoints and these breakpoints are used by Bulma Responsive Mixins. 
• Disabling breakpoints: Bulma supports a few auto-enabled breakpoints. The $widescreen and $fullhd breakpoints are the auto-enabled Bulma Responsive Breakpoints.
• Variables: These variables are used to change the content of the page according to the resolution of the page.

For using mixins, there is no specific predefined class given by Bulma rather we create our own classes and style them using SASS mixins.

Syntax:

.bulma-[Mixin Name]-mixin{
 @include [Mixin Name];
}

Parameters:

The above mixins do not accept any parameters.

Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.

Example 1: The below example illustrates Bulma's Responsiveness.

SCSS file:

CSS code:

Output:

Example 2: Below example illustrates another example of Bulma Responsiveness.

SCSS file:

CSS code:

Output:

Reference: https://versions.bulma.io/0.7.5/documentation/overview/responsiveness/