Container, section and footer

Columns arrange blocks horizontally, while three other classes build the page skeleton. The container (container) stops content from stretching across a huge monitor, the section (section) separates large parts of the page with spacing, and the footer (footer) styles the bottom of the site.

Section

A section is a section with 3 rem of padding at the top and bottom. Wrap every meaningful part in one: "About us", "Menu", "Contacts".

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<section class="section">
  <h2 class="title">Today's menu</h2>
  <p>Minestrone soup, pasta with pesto and an espresso — €15.</p>
</section>
<section class="section has-background-light">
  <h2 class="title">Contacts</h2>
  <p>12 Garden Street. Phone: +1 555 0100.</p>
</section>

The two parts of the page are separated by generous spacing, the second on a light background. The is-medium and is-large modifiers make the section padding even bigger.

Container

A container centres the content and limits its width on large screens: 960 px from 1024 px, 1152 px from 1216 px, 1344 px from 1408 px. On screens narrower than 1024 px it takes the full width. A container usually goes inside a section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<section class="section">
  <div class="container">
    <h2 class="title">About the restaurant</h2>
    <p>We cook from Tuscan recipes and bake our own bread.</p>
  </div>
</section>

In a narrow preview there is no visible difference; in a wide window the text stays in a central column while the section background spans the full width. That is the key technique: the background goes on the section, the width limit on the container.

is-max-desktop suits text pages: lines do not get too long.

Footer

The footer class gives the bottom of the site a light background and padding:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<footer class="footer">
  <div class="content has-text-centered">
    <p><strong>Trattoria Oliva</strong> — open daily from 12:00 to 23:00.</p>
    <p>© 2026 Trattoria Oliva</p>
  </div>
</footer>

A grey strip with centred text appears at the bottom. The content class styles ordinary text inside it: paragraphs, lists and headings get spacing.

Block

The block class adds a bottom margin when another element follows. Use it when elements stack without columns: <div class="block">...</div>. Most Bulma elements — buttons, notifications, cards — already have this spacing built in.

Common mistake

Putting container and section on the same element, or placing a section inside a container. The section background is then cut to the container width and on a wide screen looks like a narrow strip in the middle. The order is: section with the background outside, container inside it.