Заголовки и текст
Bulma сбрасывает стили браузера: заголовки <h1>–<h6> без классов выглядят как обычный текст. Это сделано намеренно — размер задаёте вы, а не тег. Для этого есть элементы title и subtitle, класс content для статей и хелперы — классы на одно свойство текста.
Title и subtitle
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<h1 class="title">Наше меню</h1>
<h2 class="subtitle">Сезонные блюда из местных продуктов</h2>Заголовок крупный и жирный, подзаголовок — помельче и светлее. Размер меняют модификаторы от is-1 (самый крупный) до is-6:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="title is-1">Title is-1</p>
<p class="title is-4">Title is-4</p>
<p class="subtitle is-6">Subtitle is-6</p>Тег и размер независимы: <h1 class="title is-4"> останется главным заголовком для поисковиков, но будет среднего размера. По умолчанию title — это is-3, subtitle — is-5.
Класс content
Текст из редактора или базы данных часто приходит готовым HTML без классов. Оберните его в content — Bulma оформит заголовки, абзацы, списки и цитаты внутри:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="content">
<h2>История ресторана</h2>
<p>Trattoria Oliva открылась в 2012 году в бывшей пекарне.</p>
<ul>
<li>Паста — ручной работы</li>
<li>Хлеб — из собственной печи</li>
</ul>
</div>Заголовок стал крупным, у списка появились маркеры и отступы, хотя на тегах нет классов.
Хелперы текста
| Группа | Классы |
|---|---|
| Размер | is-size-1 … is-size-7, с суффиксами: is-size-5-mobile |
| Насыщенность | has-text-weight-light, -normal, -medium, -semibold, -bold |
| Выравнивание | has-text-left, has-text-centered, has-text-right, has-text-justified |
| Регистр | is-uppercase, is-lowercase, is-capitalized |
| Начертание | is-italic, is-underlined |
| Шрифт | is-family-primary, is-family-monospace, is-family-code |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="is-size-7 is-uppercase has-text-weight-semibold">Шеф рекомендует</p>
<p class="is-size-4 has-text-weight-bold">Ризотто с белыми грибами</p>
<p class="is-italic">Подаётся с пармезаном 24-месячной выдержки.</p>Получилась карточка блюда без своего CSS: мелкая надпись капсом, крупное название и строка курсивом. Размеры is-size-* совпадают с размерами title: is-size-1 — 3 rem, is-size-7 — 0,75 rem.
Частая ошибка
Писать <h1> без класса и ждать крупный заголовок. После сброса стилей он выглядит как обычный абзац. Добавьте class="title" или оберните текст в content.