Skip to content
Related Articles

Related Articles

Bulma Section Layout

Improve Article
Save Article
  • Last Updated : 03 Feb, 2022
Improve Article
Save Article

In this article, we’ll be seeing the Bulma section. A Section is a basic container that is used to divide the webpage content into different sections. 

Bulma Section class:

  • section- This class of Bulma is used to divide the webpage into different sections and has less padding.
  • section is-medium- This class of Bulma is used to divide the webpage into different sections in a medium size.
  • section is-large- This class of Bulma is used to divide the webpage into different sections in a large size.

Syntax:

<section class="section || 
   section is-medium || 
   section is-large">
   ......
</section>

Example 1: Below example illustrates the section in Bulma.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <link rel="stylesheet" href=
</head>
  
<body>
  <section class="section has-background-primary">
    <h1 class="title">
      GeeksforGeeks
    </h1>
  
    <h2 class="subtitle">
      This is a Bulma 
      <strong>section</strong
      used for dividing the content 
      into various sections.
    </h2>
  </section>
</body>
  
</html>


Output:

Example 2: Below example illustrates the two sizes of the section class in Bulma.

HTML




<!DOCTYPE html>
<html lang="en">
  
  <head>
    <link rel="stylesheet" href=
  </head>
  
  <body>
    <section class="section is-medium 
      has-background-warning">
      <h1 class="title">
        Medium size 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-danger">
      <h1 class="title">Large size 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:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!