Skip to content
Related Articles

Related Articles

Bulma Container Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

Bulma is an open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

The container is the element used to center the content horizontally on the bigger screen sizes. Mainly, it is used as the child of the following navbar, hero, section, and footer.

When we have larger viewports then we need to center the elements then we can use the container classes to do this. There are some container classes available as shown below.

Classes Used:

  • .container: It has full width in screens with size less than 1024px.
  • .container.is-widescreen: It has full width in screen with size less than 1215px.
  • .container.is-fullhd: It has full width in screen below 1407px.
  • .container.is-max-desktop: It has full width only in screen less than 1024px and after that width will be 960px
  • .container.is-max-widescreen: It has full width in screen below 1024px and 960px when screen type is desktop and after that 1152px.

Syntax:

<div class="container <container-class>">
     ...
</div>

Syntax of the variable:

$property-name: property-value;

Variable Used:

Name Description Type Value Computed Value Computed Type
$container-offset This variable is used to define the offset of the container. compound (2 * $gap)    
$container-max-width This variable is used to define the max-width of the container. variable $fullhd 1344px + (2 * $gap) computed

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the container variable.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Container Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
    <style>
        .title{
            color:green;
        }
    </style>
</head>
  
<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
    </h3><br>
  
    <div class="container">
        <div style="background-color:green;    height:200px;">
            <p style="color:white;size:30;">
                The size of the container is 1000px
            </p>
       
       
            <h3 style="color:white;size:30;">
                GeeksforGeeks
            </h3>
        </div>
    </div>    
</body>
</html>


SCSS Code:

$container-max-width: 1000px;
.container{
   max-width:$container-max-width;
}

Compiled CSS Code:

.container {
   max-width: 1000px;
}

Output:

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the container variable.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Container Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
    <style>
        .title{
            color:green;
        }
    </style>
</head>
  
<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
        A computer science portal for geeks.
    </h3><br>
  
    <div class="container">
        <div style="background-color:green;height:200px;">
            <p style="color:white;size:30;">
                The size of the container is 100%.
            </p>
       
            <h3 style="color:white;size:30;">
                GeeksforGeeks
            </h3>
        </div>
    </div>    
</body>
    
</html>


SCSS Code:

$container-max-width: 100%;
.container{
   max-width:$container-max-width;
}

Compiled CSS Code:

.container {
   max-width: 100%;
}

Output:

 

Reference: https://bulma.io/documentation/layout/container/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!