๐ŸŽ‰ Bulma v1 is coming soon!

and much moreโ€ฆ

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>

Variables #

Name
Type
Value
Computed Value
Computed Type
$section-padding
size
3rem 1.5rem
$section-padding-desktop
size
3rem 3rem
$section-padding-medium
size
9rem 4.5rem
$section-padding-large
size
18rem 6rem

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

#native_company# #native_desc#
#native_cta#