Headings and text
Bulma resets browser styles: <h1>–<h6> headings without classes look like ordinary text. This is deliberate — you set the size, not the tag. For that there are the title and subtitle elements, the content class for articles, and helpers, classes that set a single text property.
Title and subtitle
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<h1 class="title">Our menu</h1>
<h2 class="subtitle">Seasonal dishes from local produce</h2>The title is large and bold, the subtitle smaller and lighter. Modifiers from is-1 (the largest) to is-6 change the size:
<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>Tag and size are independent: <h1 class="title is-4"> stays the main heading for search engines but is medium-sized. By default title is is-3 and subtitle is is-5.
The content class
Text from an editor or a database often arrives as ready HTML without classes. Wrap it in content and Bulma styles the headings, paragraphs, lists and quotes inside:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="content">
<h2>Our story</h2>
<p>Trattoria Oliva opened in 2012 in a former bakery.</p>
<ul>
<li>Pasta — handmade</li>
<li>Bread — from our own oven</li>
</ul>
</div>The heading became large and the list got bullets and indentation, although the tags have no classes.
Text helpers
| Group | Classes |
|---|---|
| Size | is-size-1 … is-size-7, with suffixes: is-size-5-mobile |
| Weight | has-text-weight-light, -normal, -medium, -semibold, -bold |
| Alignment | has-text-left, has-text-centered, has-text-right, has-text-justified |
| Case | is-uppercase, is-lowercase, is-capitalized |
| Style | is-italic, is-underlined |
| Font | 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">Chef's choice</p>
<p class="is-size-4 has-text-weight-bold">Porcini mushroom risotto</p>
<p class="is-italic">Served with 24-month aged Parmesan.</p>That is a dish card with no CSS of your own: small capitals, a large name and a line in italics. The is-size-* sizes match the title sizes: is-size-1 is 3 rem, is-size-7 is 0.75 rem.
Common mistake
Writing <h1> without a class and expecting a large heading. After the reset it looks like an ordinary paragraph. Add class="title" or wrap the text in content.