Open In App

Bulma Container Absolute maximum width

Improve
Improve
Like Article
Like
Save
Share
Report

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 see the Bulma Container Absolute maximum width. Sometimes, the user wants to provide a narrow container on larger viewports and for that, the Bulma framework provides different modifier classes. 

To modify the maximum width of all containers, users need to update the values of the $container-max-width sass variable.

Bulma Container Absolute maximum width: The absolute maximum width of the container is set to $fullhd breakpoint value by default. And this value can be changed as follows:

Syntax:

$container-max-width : $breakpoint|$pixel

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 Container Absolute maximum width on the container.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </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 Container Absolute maximum width
        </p>
    </div>
    <p></p>
    <div class="container is-max-desktop">
        <div class="notification 
                    has-background-dark has-text-white">
            Container having max-width of $is-max-desktop 
            on widescreen and fullhd.
       </div>
    </div><br/>
    
    <div class="container is-max-widescreen">
        <div class="notification 
                    has-background-dark has-text-white">
            Container having max-width of 
            $is-max-widescreen on fullhd.
        </div>
    </div>
</body>
</html>


SCSS file:

CSS




.text-success {
    color:darkgreen;
}
  
$gap:32px;
$container-offset:(2 * 16px);
$container-max-width:600px;
  
$desktop:960px + (2 * $gap);
$widescreen:1152px + (2 * $gap);
$fullhd:1344px + (2 * $gap);
  
.container {
    flex-grow:1;
    margin:0 auto;
    position:relative;
    width:auto;
    &.is-fluid {
        max-width:none;
        padding-left:$gap;
        padding-right:$gap;
        width:100%;
    }
    +desktop {
        max-width:$desktop - $container-offset;
    }
    +until-widescreen {
        &.is-widescreen:not(.is-max-desktop) {
            max-width:min($widescreen, $container-max-width) 
                - $container-offset;
        }
    }
    +until-fullhd {
        &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) 
        {
            max-width:min($fullhd, $container-max-width) 
                - $container-offset;
        }
    }
    +widescreen {
        &:not(.is-max-desktop) 
        {
            max-width: min($widescreen, $container-max-width) 
                - $container-offset;
        }
    }
    +fullhd {
        &:not(.is-max-desktop):not(.is-max-widescreen) 
        {
            max-width: min($fullhd, $container-max-width) 
                - $container-offset;
        }
    }
}


Compiled CSS file:

CSS




.text-success {
    color: darkgreen; 
}
  
.container {
    flex-grow: 1;
    margin: 0 auto;
    position: relative;
    width: auto
}
.container.is-fluid {
    max-width: none;
    padding-left: 32px;
    padding-right: 32px;
    width: 100%
}
.container + desktop {
    max-width: 992px
}
.container + until-widescreen.is-widescreen:not(.is-max-desktop) {
    max-width: 568px
}
.container + until-fullhd.is-fullhd:not(.is-max-desktop)
:not(.is-max-widescreen) {
    max-width: 568px;
}
.container + widescreen:not(.is-max-desktop) {
    max-width: 568px;
}
.container + fullhd:not(.is-max-desktop)
:not(.is-max-widescreen) {
    max-width: 568px;
}


Output:

 

Example 2:  Below example illustrates another example of the Bulma Container Absolute maximum width on Container.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </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 Container Absolute maximum width
        </p>
    </div>
    <p></p>
    <div class="container is-max-desktop">
        <div class="notification">
            <img src=
                alt=""/>
        </div>
    </div><br/>
    
    <div class="container is-max-widescreen">
        <div class="notification">
            <img src=
                alt=""/>
        </div>
    </div>
</body>
</html>


SCSS file:

CSS




.text-success {
    color: darkgreen;
}
  
$gap: 32px;
$container-offset: (2 * 16px);
$container-max-width: 600px;
  
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$fullhd: 1344px + (2 * $gap);
  
.container {
    flex-grow: 1;
    margin: 0 auto;
    position: relative;
    width: auto;
    &.is-fluid 
    {
        max-width: none;
        padding-left: $gap;
        padding-right: $gap;
        width: 100%;
    }
    +desktop 
    {
        max-width: $desktop - $container-offset;
    }
    +until-widescreen 
    {
        &.is-widescreen:not(.is-max-desktop) 
        {
            max-width:min($widescreen, $container-max-width) - $container-offset;
        }
    }
    +until-fullhd 
    {
        &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) 
        {
            max-width: min($fullhd, $container-max-width) - $container-offset;
        }
    }
    +widescreen 
    {
        &:not(.is-max-desktop) 
        {
            max-width: min($widescreen, $container-max-width) - $container-offset;
        }
    }
    +fullhd {
        &:not(.is-max-desktop):not(.is-max-widescreen)
        {
            max-width: min($fullhd, $container-max-width) - $container-offset;
        }
    }
}


Compiled CSS file:

CSS




.text-success {
    color:darkgreen; 
}
  
.container {
    flex-grow:1;
    margin:0 auto;
    position:relative;
    width:auto
}
.container.is-fluid {
    max-width:none;
    padding-left:32px;
    padding-right:32px;
    width:100%
}
.container + desktop {
    max-width:992px
}
.container + until-widescreen.is-widescreen
:not(.is-max-desktop) {
    max-width:568px
}
.container + until-fullhd.is-fullhd:not(.is-max-desktop)
:not(.is-max-widescreen) {
    max-width:568px
}
.container + widescreen:not(.is-max-desktop){
    max-width:568px;
}
.container + fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width:568px
}


Output:

 

Reference: https://bulma.io/documentation/layout/container/#absolute-maximum-width



Last Updated : 27 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads