Install Bulma in Laravel

npm install bulma

CSS

Open de resources/assets/app.scss file in your Laravel project with an editor. Delete the Bootstrap line in this file

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Import Bulma into this file

// Bulma
@import "~bulma/bulma.sass";

In this file you see also @import “variables”; The code in this file is for Twitter Bootstrap, you can delete the code and use the file for Bulma scss.

Javascript

Bulma does not come with any javascript. But Laravel is still referencing to the javascript from Twitter Bootstrap. Open resources/asset/app.js Delete this line:

require('./bootstrap');

You can now remove the file ‘bootstrap.js’ (same directory as this file), we don’t use it anymore.

Test if it works

I’m using a fresh installation from Laravel so I test it in resources/views/home.blade.php Add a piece of Bulma code between the section tags, for example

<a class="button is-success">Success</a>

If you go to yourdomain.com/home you only see a link ‘Succes’ without the button styling from Bulma. This is because we first need to compile the Bulma asset files.

Run

npm run dev

If we refresh the page , we see the Bulma styling on the button.