Bulma Section Sizes

In this article, we'll be seeing the Bulma section sizes. In Bulma, there are two types of sizes available that divide the webpage content into different sections with different spacing/paddings.

Bulma Section Sizes class:

is-medium- This class of Bulma is used to divide the webpage content into different sections in a medium spacing.
is-large- This class of Bulma is used to divide the webpage content into different sections in a large spacing.

Syntax:

// For medium spacing
<section class="section is-medium">
    ...
</section>

// For Large spacing
<section class="section is-large">
    ...
</section>

Example: Below example illustrates the Bulma is-medium and is-large sections.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <section class="section is-medium 
    has-background-info">
    <h1 class="title">
      GFG Medium section
    </h1>

    <h2 class="subtitle">
        This is a Bulma 
        <strong>Medium section</strong> 
        used for dividing the content into 
        various sections.
    </h2>
  </section>

  <section class="section is-large 
    has-background-success">
    <h1 class="title">
      GFG Large section
    </h1>

    <h2 class="subtitle">
        This is a Bulma 
        <strong>Large section</strong> 
        used for dividing the content 
        into various sections.
    </h2>
  </section>
</body>

</html>

Output:

Example 2: Another example for demonstrating Bulma Section Sizes.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <link
    rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
</head>

<body>
  <section class="section is-medium 
           has-background-warning">
    <h1 class="title">
      Medium size section
    </h1>

    <div class="columns p-4">
      <div class="column has-text-white 
          has-background-primary p-4">
          Java
      </div>

      <div class="column has-text-white 
          has-background-info p-4">
          C++
      </div>

      <div class="column has-text-white 
      has-background-danger p-4">
          Python
      </div>

      <div class="column has-text-dark 
          has-background-light p-4">
          C#  
      </div>
    </div>
  </section>

  <section class="section is-large 
           has-background-danger">
    <h1 class="title">
      Large size section
    </h1>

    <div class="columns p-4">
      <div class="column has-text-white 
           has-background-primary p-4">
           Java
      </div>
      
      <div class="column has-text-white 
           has-background-info p-4">
          C++
      </div>

      <div class="column has-text-dark 
           has-background-warning p-4">
           Python
      </div>

      <div class="column has-text-dark 
           has-background-light p-4">
           C#  
      </div>
    </div>
  </section>
</body>

</html>

Output:

Reference: https://bulma.io/documentation/layout/section/#sizes

Explore