Spacing, flexbox and visibility
Spacing is what you most often end up writing CSS for: "a bit more room above the button", "remove the margin under the last paragraph". Bulma has spacing helpers for this — short classes such as mt-4 or px-2. Flexbox and visibility helpers live next to them.
How to read a spacing class
A class is built from three parts: property, side and size.
| Part | Values |
|---|---|
| Property | m for margin, p for padding |
| Side | t top, r right, b bottom, l left, x left and right, y top and bottom; no letter means all sides |
| Size | 0 is 0, 1 0.25 rem, 2 0.5 rem, 3 0.75 rem, 4 1 rem, 5 1.5 rem, 6 3 rem |
So mt-4 is a top margin of 1 rem, px-2 is left and right padding of 0.5 rem each, m-0 means no margin at all.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="has-background-light p-5">
<p class="title is-5 mb-2">Business lunch</p>
<p class="mb-4">Soup, a main course and a drink — €14.</p>
<button class="button is-primary">Order</button>
</div>A grey block with generous padding, the heading close to the description, and a noticeable gap before the button. Helpers are written with !important, so they override the spacing built into elements.
To centre a block horizontally there is mx-auto: it sets automatic left and right margins.
Flexbox
So that you do not write CSS for a single flexbox line, Bulma has helpers named after the properties:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="is-flex is-justify-content-space-between is-align-items-center has-background-light p-3">
<span>Margherita</span>
<span class="has-text-weight-bold">€9</span>
</div>The name on the left, the price on the right, both vertically centred. The classes read like CSS: is-flex is display: flex, is-justify-content-space-between is justify-content: space-between. There are others too: is-flex-direction-column, is-flex-wrap-wrap, is-flex-grow-1.
Visibility
| Class | What it does |
|---|---|
is-hidden | Always hides |
is-hidden-mobile | Hides up to 768 px |
is-hidden-touch | Hides up to 1023 px |
is-hidden-desktop | Hides from 1024 px |
is-sr-only | Hides from the screen but keeps it for screen readers |
is-invisible | Makes it invisible, but the space remains |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="is-hidden-mobile">Call us: +1 555 0100</p>
<a class="button is-primary is-hidden-tablet" href="tel:+15550100">Call</a>On a desktop you see the line with the number; on a phone a "Call" button replaces it. The narrow preview shows the phone version, the button; open the example in a wide window to see the line.
Common mistake
Expecting mt-7 or p-10 to work. Bulma's scale stops at 6 (3 rem), and a class that does not exist silently does nothing. For spacing larger than 3 rem write your own CSS rule or extend the scale with Sass.