What Bulma is
Bulma is a CSS framework: a ready-made stylesheet with classes for the grid, buttons, forms, menus and cards. You write ordinary HTML and add classes such as button is-primary, and the look comes from Bulma. The course is based on Bulma 1.0, the version in which every setting is exposed as a CSS variable.
What makes Bulma different
| Feature | What it means |
|---|---|
| CSS only | Bulma contains no JavaScript at all. You load a single stylesheet |
| Flexbox | Columns and layout are built on flexbox, which you know from the tutorial |
| Readable classes | button, card, is-large, has-text-centered read like English words |
| Modular | With Sass you can build only the parts you need |
Bulma and Bootstrap
Both frameworks give you a grid and a set of components, but the approach differs:
| Bulma | Bootstrap | |
|---|---|---|
| JavaScript | None | Included: modals, menus and tabs work on their own |
| Modifiers | is-primary, is-large | btn-primary, btn-lg |
| Grid | Columns share the row equally, widths in words: is-half | 12 parts: col-6 |
Having no JavaScript is both a plus and a minus. Bulma does not force its scripts on you and mixes easily with React, Vue or plain JS. But anything that opens and closes, such as the mobile menu or a modal, you have to bring to life yourself. It usually takes five to ten lines of code, and the course shows them.
Throughout the course we will build a website for the restaurant Trattoria Oliva, with a menu, dish cards and a booking form, plus a small admin page for orders.
Loading it from a CDN
A CDN is a network of servers that hands out popular files. One line in <head> is enough to load Bulma. Create a project folder with an index.html file in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trattoria Oliva</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
</head>
<body>
<section class="section">
<h1 class="title">Trattoria Oliva</h1>
<p class="subtitle">Home-style Italian food in the city centre.</p>
<button class="button is-primary">Book a table</button>
</section>
</body>
</html>Open the file in a browser: the heading, the subtitle and the turquoise button are already styled, although you have written no CSS. The section class added spacing around the content, and title and subtitle set the text sizes.
How the course examples work
From now on the examples are fragments of the <body> content. Each starts with the <link> line so that the preview under the code loads Bulma by itself:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<button class="button is-success">Save</button>
<button class="button is-light">Cancel</button>The preview shows a green "Save" button and a light grey "Cancel" button.
The preview window is narrower than 769 pixels, so Bulma shows the phone layout in it: columns stack and the menu hides behind a button. To see the wide-screen version, copy the example into your own index.html and open it in a full-size browser window.
Common mistake
Expecting dropdowns and modals to work after loading Bulma, as they do in Bootstrap. Bulma provides only the look: the is-active class shows a menu, but your JavaScript has to add and remove it on click. If something "does not open", check that the page has a click handler for it.