Bulma Responsiveness Breakpoints
Last Updated :
25 Oct, 2022
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 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 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: 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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Bulma Responsiveness Breakpoints
</p>
</div>
<p></p>
<div>
<p class="bulma-breakpoint">
GeeksforGeeks: <br>
A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
$gap: 32px;
$tablet: 769px;
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$fullhd: 1344px + (2 * $gap);
$widescreen - enabled: true;
$fullhd - enabled: true;
@mixin mobile {
@media screen and(max - width: $tablet - 1px) {
@content
}
}
@mixin tablet {
@media screen and(min - width: $tablet), print {
@content
}
}
@mixin desktop {
@media screen and(min - width: $desktop) {
@content
}
}
@mixin widescreen {
@if $widescreen - enabled {
@media screen and(min - width: $widescreen) {
@content
}
}
}
@mixin fullhd {
@if $fullhd - enabled {
@media screen and(min - width: $fullhd) {
@content
}
}
}
.text - success
{
color: darkgreen;
}
.bulma - breakpoint {
color: white;
@include mobile {
background: lightgreen;
}
@include tablet {
background: green;
}
@include desktop {
background: darkgreen;
}
@include widescreen {
background: lightseagreen;
}
@include fullhd {
background: darkolivegreen;
}
}
|
CSS code:
CSS
.text-success
{
color:darkgreen;
}
.bulma-breakpoint
{
color:white;
}
@media screen and (max-width: 768px) {
.bulma-breakpoint
{
background: lightgreen;
}
}
@media screen and (min-width: 769px), print {
.bulma-breakpoint
{
background:green;
}
}
@media screen and (min-width: 1024px) {
.bulma-breakpoint
{
background:darkgreen;
}
}
@media screen and (min-width: 1216px) {
.bulma-breakpoint
{
background: lightseagreen;
}
}
@media screen and (min-width: 1408px) {
.bulma-breakpoint
{
background: darkolivegreen;
}
}
|
Output:
Example 2: Below example illustrates another example of the Bulma Responsiveness Breakpoints.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Bulma Responsiveness Breakpoints
</p>
</div>
<p></p>
<div>
<p class="bulma-breakpoint">
GeeksforGeeks: <br>
A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
$gap: 32px;
$tablet: 769px;
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$fullhd: 1344px + (2 * $gap);
$widescreen - enabled: true;
$fullhd - enabled: true;
@mixin tablet - only {
@media screen and(min - width: $tablet) and(max - width: $desktop - 1px) {
@content
}
}
@mixin desktop - only {
@if $widescreen - enabled {
@media screen and(min - width: $desktop) and(max - width: $widescreen - 1px) {
@content
}
}
}
@mixin widescreen - only {
@if $widescreen - enabled and $fullhd - enabled {
@media screen and(min - width: $widescreen) and(max - width: $fullhd - 1px) {
@content
}
}
}
.text - success {
color: darkgreen;
}
.bulma - breakpoint {
@include tablet - only {
background: lightgreen;
color: white;
}
@include desktop - only {
background: darkgreen;
color: white;
}
@include widescreen - only {
background: lime;
color: white;
}
}
|
CSS code:
CSS
.text-success
{
color: darkgreen;
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-breakpoint
{
background:lightgreen;
color: white;
}
}
@media screen and (min-width: 1024px) and (max-width: 1215px)
{
.bulma-breakpoint
{
background: darkgreen;
color: white;
}
}
@media screen and (min-width: 1216px) and (max-width: 1407px)
{
.bulma-breakpoint
{
background: lime;
color: white;
}
}
|
Output:
Example 3: Below example illustrates another example of the Bulma Responsiveness Breakpoints.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Bulma Responsiveness Breakpoints
</p>
</div>
<p></p>
<div>
<p class="bulma-breakpoint">
GeeksforGeeks: <br>
A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
$gap: 32px;
$widescreen: 1152px + (2 * $gap);
$widescreen - enabled: true;
@mixin until - widescreen {
@if $widescreen - enabled {
@media screen and(max - width: $widescreen - 1px) {
@content
}
}
}
.text - success
{
color: darkgreen;
}
.bulma - breakpoint {
@include until - widescreen {
background: darkgreen;
color: white;
}
}
|
CSS code:
CSS
.text-success
{
color:darkgreen;
}
@media screen and (max-width: 1215px)
{
.bulma-breakpoint
{
background: darkgreen;
color: white;
}
}
|
Output:
Reference: https://versions.bulma.io/0.7.5/documentation/overview/responsiveness/#breakpoints
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...