Responsive Mixins

Mixins that allows you to define different styles for each screen size

Bulma is responsive by default. Learn more about Bulma's responsiveness.

from() and until() mixins #

Responsiveness in CSS is based on media queries (see MDN documentation).

Bulma provides 2 useful responsive mixins: 

  • @mixin from($breakpoint)
    to target devices with a screen wider than or equal to the breakpoint 
  • @mixin until($breakpoint)
    to target devices with a screen narrower than the breakpoint

Their usage is very simple:

from() #

The from() mixin has a single parameter which sets the screen width from which the styles it contains will be applied:

Sass source

.my-element {
  background: red;

  @include from(1280px) {
    background: blue;
  }
}

CSS output

.my-element {
  background: red;
}

@media screen and (min-width: 1280px) {
  .my-element {
    background: blue;
  }
}

For screens with a width of 1279px or less, the element's background will be red.
For screens 1280px-wide or more, the element's background will be blue.

until() #

The until() mixin has a single parameter which sets the screen width (minus 1px) until which the styles it contains will be applied.

This means that if you set a value of 1280px, the styles will be applied on a screen width of 1279px but not on a screen width of 1280px.

The reason for this 1px offset is to allow you to use both from() and until() with the same breakpoint value. This leaves no gap between the 2 sets of rules.

Sass source

$breakpoint: 1280px;

.my-element {
  @include until($breakpoint) {
    background: green;
  }

  @include from($breakpoint) {
    background: orange;
  }
}

CSS output

@media screen and (max-width: 1279px) {
  .my-element {
    background: green;
  }
}

@media screen and (min-width: 1280px) {
  .my-element {
    background: orange;
  }
}

For screens with a width of 1279px or less, the element's background will be green.
For screens 1280px-wide or more, the element's background will be orange.

Named mixins #

By having 4 breakpoints and supporting 5 screen sizes, Bulma can support a lot of different setups.

While you could use the mixins 
@include from()
and 
@include until()
, Bulma provides quick shortcuts with 11 named mixins.

These responsive mixins are named after the screen sizes and breakpoints used in Bulma, so that you can use them to create a responsive designs:

Mobile
Up to 768px 		Tablet
Between 769px and 1023px 		Desktop
Between 1024px and 1215px 		Widescreen
Between 1216px and 1407px 		FullHD
1408px and above 
@include mobile {
  // Styles applied
  // below $tablet
}

-

-

 
@include tablet {
  // Styles applied
  // above $tablet
}

-

 
@include desktop {
  // Styles applied
  // above $desktop
}

-

 
@include widescreen {
  // Styles applied
  // above $widescreen
}

-

 
@include fullhd {
  // Styles applied
  // above $fullhd
}

-

 
@include tablet-only {
  // Styles applied
  // between $tablet
  // and $desktop
}

-

-

 
@include desktop-only {
  // Styles applied
  // between $desktop
  // and $widescreen
}

-

-

 
@include widescreen-only {
  // Styles applied
  // between $widescreen
  // and $fullhd
}

-

 
@include touch {
  // Styles applied
  // below $desktop
}

-

 
@include until-widescreen {
  // Styles applied
  // below $widescreen
}

-

 
@include until {
  // Styles applied
  // below $fullhd
}

-

Learn more about Bulma responsiveness.