You are viewing the deprecated 0.7.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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!