Bulma Responsiveness Disabling 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 Disabling Breakpoints. Bulma supports a few auto-enabled breakpoints and these are the following auto-enabled Bulma Responsive Breakpoints.

Bulma Responsive Breakpoints:

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.

Syntax: To disable breakpoints

$[Breakpoint-Name]-enabled: false

Bulma Responsive Mixins using the above-defined breakpoints.

@include widescreen {}
@include fullhd {}
@include widescreen-only {}
@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-[Mixin Name]-mixin
{
    @include [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 without disabling any breakpoints.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet" href="style.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); 
$widescreen - enabled: true; 
$fullhd: 1344px + (2 * $gap); 
$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: lightseagreen; 
    } 
  
    @include widescreen { 
        background: lime; 
    } 
  
    @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: lightseagreen;  
    }  
} 
@media screen and (min-width: 1216px) { 
    .bulma-breakpoint  
    { 
        background: lime; 
    } 
} 
@media screen and (min-width: 1408px) { 
    .bulma-breakpoint  
    { 
        background: darkolivegreen;  
    } 
} 

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet" href="style.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); 
  
// Disable the widescreen breakpoint 
$widescreen - enabled: false; 
  
// Disable the fullhd breakpoint 
$fullhd - enabled: false; 
  
@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; 
} 
  
// Disable the widescreen breakpoint 
$widescreen - enabled: false; 
  
// Disable the fullhd breakpoint 
$fullhd - enabled: false; 
  
.bulma - breakpoint { 
    color: white; 
  
    @include mobile { 
        background: lightgreen; 
    } 
    @include tablet { 
        background: green; 
    } 
    @include desktop { 
        background: lightseagreen; 
    } 
    @include widescreen { 
        background: lime; 
    } 
    @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: lightseagreen; 
    } 
}