Bulma is responsive by default. Learn more about Bulma's responsiveness.
Bulma Sass Responsive Mixins
Mixins that allows you to define different styles for each screen size
from() and until() mixins #
Responsiveness in CSS is based on media queries (see MDN documentation).
Bulma provides 2 useful responsive mixins:
- to target devices with a screen wider than or equal to the 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
CSS output
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
CSS output
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.
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
|
FullHD1408px and above
|
---|---|---|---|---|
- |
||||
- |
||||
- |
||||
- |
||||
- |
||||
- |
- |
|||
- |
- |
|||
- |
- |
|||
- |
||||
- |
||||
- |
Learn more about Bulma responsiveness.