Bulma Responsiveness Breakpoints

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 learn about Bulma Responsive Breakpoints. Bulma supports 5 Breakpoints and these breakpoints are used by Bulma Responsive Mixins.

Following are Bulma Responsive Breakpoints as given below:

• mobile: This breakpoint has a value equal to 768px and using this in response mixin, the user can make it responsive up to 768px.
• tablet: This breakpoint has a value equal to 769px and using this in response mixin, the user can make the feature responsive from 769px.
• desktop: This breakpoint has a value equal to 1024px and using this in response mixin, the user can make the feature responsive from 1024px.
• widescreen: This breakpoint has a value equal to 1216px and using this in response mixin, the user can make the feature responsive from 1216px.
• fullhd: This breakpoint has a value equal to 1408px and using this in response mixin, the user can make the feature responsive from 1408px.

Following are the Bulma Responsive Mixins using the above-defined breakpoints.

• @include mobile {}
• @include tablet {}
• @include desktop {}
• @include widescreen {}
• @include fullhd {}
• @include tablet-only {}
• @include desktop-only {}
• @include widescreen-nly {}
• @include touch {}
• @include until-widescreen {}
• @include until-fullhd {}

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-[CSS Mixin Name]-mixin{
 @include [CSS 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: Below example illustrates the Bulma Responsiveness Breakpoints.

SCSS file:

CSS code:

Output:

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

SCSS file:

CSS code:

Output:

Example 3: Below example illustrates another example of the Bulma Responsiveness Breakpoints.

SCSS file:

CSS code:

Output: