The is- and has- modifiers
Almost every Bulma element is described by two kinds of classes. The main class says what the element is: button, notification, card. A modifier changes its look or state: colour, size, "active". Modifiers start with is- or has- and do nothing on their own — only together with the main class.
The is- modifier
is- answers the question "what is it like?": which colour, which size, which state.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<button class="button">Default</button>
<button class="button is-primary">Primary</button>
<button class="button is-primary is-large">Large</button>
<button class="button is-primary is-rounded">Rounded</button>All four are buttons; only the modifiers differ. You can combine as many modifiers on one element as you like: colour, size and shape at once.
| Group | Examples |
|---|---|
| Colour | is-primary, is-link, is-info, is-success, is-warning, is-danger |
| Size | is-small, is-medium, is-large |
| State | is-active, is-loading, is-static |
| Shape | is-rounded, is-fullwidth, is-outlined |
Colours and sizes are the same for every element: once you know is-danger for a button, you already know how to make a notification or a tag red.
The has- modifier
has- answers the question "what does it have?". Most often these are helpers — single-property classes that work on any element:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="has-text-centered">Centred text</p>
<p class="has-text-danger has-text-weight-bold">Sold out</p>
<p class="has-background-light">A block with a light background</p>The first line is centred, the second is red and bold, the third has a light background. has- also describes "attachments" of an element: has-addons (a field with an attached button), has-icons-left (a field with an icon on the left).
Screen suffixes
Many classes accept a screen width suffix — a breakpoint after which the rule starts or stops applying:
| Suffix | Screen width |
|---|---|
-mobile | up to 768 px |
-tablet | from 769 px |
-touch | up to 1023 px (phones and tablets) |
-desktop | from 1024 px |
-widescreen | from 1216 px |
-fullhd | from 1408 px |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="has-text-centered-mobile has-text-right-tablet">Opening hours: 12:00–23:00</p>On a narrow screen the line is centred, on a wide one it is aligned right. In the preview, which is narrower than 769 px, it is centred; open the example in a wide window to see it aligned right.
Common mistake
Writing a modifier without the main class: <a class="is-primary">. Bulma's rules are tied to a pair of classes, such as .button.is-primary, so a lone is-primary does nothing. Main class first, then the modifiers: class="button is-primary".