Bulma Container Overview

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 that is used to center the content horizontally on the bigger screen sizes. Mostly, it is used as the child of the following navbar, hero, section, 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.

Bulma Container classes:

.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.

Screen sizes⇢ Classes ⇣	Below 1024px	Desktop Between 1024px and 1215 px	Widescreens Between 1216 px and 1407 px	Full HD screen greater than 1408 px
Classes	maximum-width	maximum-width	maximum-width	maximum-width
.container	Full-width	960px	1152px	1344px
.container.is-widescreen	Full-width	Full-width	1152px	1344px
.container.is-fullhd	Full-width	Full-width	Full-width	1344px
.container.is-max-desktop	Full-width	960px	960px	960px
.container.is-max-widescreen	Full-width	960px	1152px	1152px

Syntax:

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

Example 1: The following code demonstrates the container class. The container width will be full below the screen size of 1024px as shown below.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>Bulma Container</title>

    <link rel='stylesheet' href=

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

</head>
 
<body>

    <h1 class="is-size-2 has-text-success">

        GeeksforGeeks

    </h1>

    <b class="is-size-4">

        Bulma Container overview

    </b>

    <div class="container">

        <div style="background-color:black; 

            height:200px;">

            <p style="color:white; size:30;">

                The container width will be full 

                below screen size of 1024px

            </p>
 
            <h3 style="color:white; size:30;">

                GeeksforGeeks

            </h3>

        </div>

    </div>

</body>
 
</html>

Output:

Bulma Container Overview

Example 2: The following code uses is-fullhd modifier class. The container width will be full below the screen size of 1407px.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>Bulma Container</title>

    <link rel='stylesheet' href=

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

</head>
 
<body>

    <h1 class="is-size-2 has-text-success">

        GeeksforGeeks

    </h1>

    <b class="is-size-4">

        Bulma Container overview

    </b>

    <div class="container is-fullhd">

        <div class="" style="background-color:black; 

            height:200px;">

            <p style="color:white; size:30;">

                Using is-fullhd class

            </p>
 
            <p style="color:white; size:30;">

                The container width will be full 

                below screen size of 1407px

            </p>
 
            <h3 style="color:white; size:30;">

                GeeksforGeeks

            </h3>

        </div>

    </div>

</body>
 
</html>