Контейнер, секция и подвал

Колонки раскладывают блоки по горизонтали, а каркас страницы строят три других класса. Контейнер (container) не даёт содержимому растянуться на весь широкий монитор, секция (section) отделяет крупные части страницы отступами, подвал (footer) оформляет низ сайта.

Секция

Секция — это section с отступами 3 rem сверху и снизу. Ею оборачивают каждую смысловую часть: «О нас», «Меню», «Контакты».

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<section class="section">
  <h2 class="title">Меню дня</h2>
  <p>Суп минестроне, паста с песто и чашка эспрессо — €15.</p>
</section>
<section class="section has-background-light">
  <h2 class="title">Контакты</h2>
  <p>Ул. Садовая, 12. Телефон: +1 555 0100.</p>
</section>

Две части страницы отделены просторными отступами, вторая — на светлом фоне. Модификаторы is-medium и is-large делают отступы секции ещё больше.

Контейнер

Контейнер центрирует содержимое и ограничивает его ширину на больших экранах: 960 px от 1024 px, 1152 px от 1216 px, 1344 px от 1408 px. На экранах уже 1024 px он занимает всю ширину. Обычно контейнер кладут внутрь секции:

<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">О ресторане</h2>
    <p>Мы готовим по рецептам из Тосканы и печём хлеб сами.</p>
  </div>
</section>

В узком превью разницы не видно; в широком окне текст останется в центральной колонке, а фон секции растянется на всю ширину. Это главный приём: фон — на секции, ограничение ширины — на контейнере.

Для страницы с текстом удобен is-max-desktop: строки не становятся слишком длинными.

Подвал

Класс footer даёт низу сайта светлый фон и отступы:

<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> — ежедневно с 12:00 до 23:00.</p>
    <p>© 2026 Trattoria Oliva</p>
  </div>
</footer>

Внизу появилась серая полоса с центрированным текстом. Класс content оформляет обычный текст внутри: абзацы, списки и заголовки получают отступы.

Блок

Класс block добавляет отступ снизу, если за элементом идёт другой. Он нужен, когда элементы стоят друг под другом без колонок: <div class="block">...</div>. У большинства элементов Bulma — кнопок, уведомлений, карточек — этот отступ уже встроен.

Частая ошибка

Ставить container и section на один элемент или класть секцию внутрь контейнера. Тогда фон секции обрезается по ширине контейнера и на широком экране выглядит как узкая полоса посередине. Порядок такой: снаружи section с фоном, внутри неё container.