Section

A simple container to divide your page into sections, like the one you're currently reading

Use sections as direct children of body.

<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Section</h1>
      <h2 class="subtitle">
        A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
      </h2>
    </div>
  </section>
</body>

You can use the modifiers is-medium and is-large to change the spacing.

Variables #

You can use these variables to customize this layout. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name	Default value
Name	Default value
`$section-padding`	`3rem 1.5rem`
`$section-padding-medium`	`9rem 1.5rem`
`$section-padding-large`	`18rem 1.5rem`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Sponsors

Bulma Partners

Check out their products!