Layout

There are classes that allow you to organize your page in a better way

Container

Container is used to give your page a more ordered look by giving some margin on sides. A container can be also used with the is-fluid class, as in other frameworks

<div class="container">
  <div style="height: 3rem; background-color: red; border-radius: 4px;"></div>
</div>
<div class="container is-fluid">
  <div style="height: 3rem; background-color: red; border-radius: 4px;"></div>
</div>

Section

A section is used to group content and separate it from other sections. A section adds some extra padding to separate content. A section can be used inside a container, as in the following example. You can also use the section of HTML

<div class="container">
  <div class="section">
    <div style="height: 3rem; background-color: red; border-radius: 4px;"></div>
  </div>
  <section class="section">
    <div style="height: 3rem; background-color: red; border-radius: 4px;"></div>
  </section>
</div>

Spacer

The spacer is used to put some space between elements. It can be useful to separate content inside a section

<div class="container">
  <div class="section">
    <span>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique minima et dolorum
      repellat eaque error distinctio ab suscipit, ipsa eveniet optio quibusdam itaque dolorem illum
      blanditiis dicta recusandae delectus quisquam?
    </span>
    <div class="spacer">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique minima et dolorum
        repellat eaque error distinctio ab suscipit, ipsa eveniet optio quibusdam itaque dolorem illum
        blanditiis dicta recusandae delectus quisquam?
      </span>
    </div>
    <span>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique minima et dolorum
      repellat eaque error distinctio ab suscipit, ipsa eveniet optio quibusdam itaque dolorem illum
      blanditiis dicta recusandae delectus quisquam?
    </span>
  </div>
</div>