Section

A simple container to divide your page into sections.

Use sections as direct children of body:

<body>
  <section class="section">
    <div class="container">
        <h1 class="title">Section</h1>
        <p>A simple container to divide your page into sections.</p>
    </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 more.

Name Type Default value
$section-padding Size 2rem 1.5rem
$section-padding-medium Size 6rem 1.5rem
$section-padding-large Size 12rem 1.5rem
← Form →