You are viewing the deprecated 0.6.1 version of the website. Click here to view the latest version

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

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!