Installing with npm and Vite

A CDN is handy for first steps, but in a real project Bulma is usually installed with npm, the Node.js package manager. Then the files live in the project, the version is recorded in package.json, and the Vite bundler combines and minifies the styles together with your code. You need Node.js 20 or newer.

Creating a project

Create a Vite project from the vanilla template, plain HTML and JavaScript without a framework, and install Bulma:

npm create vite@latest oliva -- --template vanilla
cd oliva
npm install
npm install bulma

The last command downloads the bulma package into node_modules and records it in package.json.

What is inside the package

node_modules/bulma/
├── css/
│   ├── bulma.css          ready styles, readable version
│   ├── bulma.min.css      the same, minified
│   └── versions/          builds without dark mode, without helpers
└── sass/                  Sass sources for your own build

The css folder is what you need when you just load the styles. The sass folder comes in handy in the lesson on customising with Sass.

Loading the styles

The Vite template puts demo code with a counter into src/ — you can delete it. Replace the contents of src/main.js:

// src/main.js
import 'bulma/css/bulma.min.css';
import './style.css';

The first line loads Bulma, the second loads your styles. The order matters: your rules come later, so they can override Bulma's.

index.html already loads main.js. Put the page markup before the <script> tag:

<section class="section">
  <h1 class="title">Trattoria Oliva</h1>
  <button class="button is-primary">Book a table</button>
</section>
<script type="module" src="/src/main.js"></script>

The <script type="module"> tag is already in the template. The preview under the code has no styles: in the project Vite adds them through main.js.

Running and building

npm run dev

The command starts the development server. Open the address shown in the terminal, usually http://localhost:5173: the heading and the button are styled by Bulma. The page reloads by itself when you change files.

npm run build

The build puts the finished site into the dist folder: HTML, one minified CSS file and JavaScript. That folder is what you upload to hosting.

Without a bundler

With no bundler, link the file from node_modules with an ordinary <link> in <head>: node_modules/bulma/css/bulma.min.css. For a site on hosting a CDN or Vite is more convenient, though: the node_modules folder is usually not copied to the server.

Common mistake

Importing your styles before Bulma: first ./style.css, then bulma/css/bulma.min.css. With equal specificity Bulma's rules then come last and win over yours, so your colour for .title "does not apply". Always load Bulma first and your styles after it.