Bulma Section Sizes

Last Updated : 03 Feb, 2022

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>