Open In App

Bulma Container Overview

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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

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=
</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>


Output:

Bulma Container Overview

Bulma Container Overview

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



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