Section

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

The section components are simple layout elements with responsive padding. They are best used as direct children of body.

Example

Section

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

HTML

<section class="section">
  <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>
</section>

Sizes #

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

Example

Medium section

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

HTML

<section class="section is-medium">
  <h1 class="title">Medium section</h1>
  <h2 class="subtitle">
    A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
  </h2>
</section>

Example

Large section

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

HTML

<section class="section is-large">
  <h1 class="title">Large section</h1>
  <h2 class="subtitle">
    A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
  </h2>
</section>