PHPackages                             pratyushpundir/laravel-bulma-preset - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. pratyushpundir/laravel-bulma-preset

ActiveLibrary[Utility & Helpers](/categories/utility)

pratyushpundir/laravel-bulma-preset
===================================

Use Bulma instead of Bootstrap along with versioned asset files.

0.0.9(7y ago)223MITHTML

Since Dec 16Pushed 7y ago1 watchersCompare

[ Source](https://github.com/pratyushpundir/laravel-bulma-preset)[ Packagist](https://packagist.org/packages/pratyushpundir/laravel-bulma-preset)[ RSS](/packages/pratyushpundir-laravel-bulma-preset/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependenciesVersions (10)Used By (0)

### Bulma Frontend Preset For Laravel

[](#bulma-frontend-preset-for-laravel)

This preset switches out [Bootstrap](https://getbootstrap.com/) with the awesome [Bulma](https://bulma.io/). In it's own words:

> Bulma is a free, open source CSS framework based on Flexbox and used by more than 100,000 developers.

 [![Screenshot-2018-12-16-at-3-06-07-PM](https://camo.githubusercontent.com/45edb44cae2e63b714e9fb7f8e8fccb9e500e61ad292136b29fb4a1485c43509/68747470733a2f2f692e6962622e636f2f50346e6b77677a2f53637265656e73686f742d323031382d31322d31362d61742d332d30362d30372d504d2e706e67)](https://camo.githubusercontent.com/45edb44cae2e63b714e9fb7f8e8fccb9e500e61ad292136b29fb4a1485c43509/68747470733a2f2f692e6962622e636f2f50346e6b77677a2f53637265656e73686f742d323031382d31322d31362d61742d332d30362d30372d504d2e706e67)

### What it does

[](#what-it-does)

- Removes `bootstrap` in favor of `bulma`.
- Other NPM packages removed: `lodash`, `jquery`, `popper.js`.
- Adds a Bulma based Blade layout: `resources/views/bulma/layouts/app.blade.php`.
- Adds a Bulma based Blade view: `resources/views/bulma/welcome.blade.php`.
- Adds a Bulma based "Navbar" Blade component: `resources/views/bulma/shared/bulma-nav.blade.php`.
- Adds versioning / cache-busting of CSS and JS assets for production environments in your `webpack.mix.js`.

### Installation

[](#installation)

This preset's Blade views are kept in it's own directory so nothing should go wrong on that front, but, for a non-fresh project, it ***will 100%*** squash any custom JS, SASS, Mix code you may have written). ***You have been warned!***

- `cd` into your ***fresh*** Laravel project.
- Run `composer require pratyushpundir/laravel-bulma-preset`.
- Then run `php artisan preset bulma`. This will scaffold everything you need to replace Bootstrap with Bulma and set up your JS, SASS and Blade Views.
- Install and compile your assets with `yarn && yarn watch` or `npm install && npm run watch` (but `yarn` is so much better!!!).
- Visit `routes/web.php` and change the following piece of code:

```
Route::get('/', function () {
    // Change this...
    return view('welcome');
});
```

to

```
Route::get('/', function () {
    // To this!
    return view('bulma.welcome');
});
```

That's it!. Run `php artisan serve` and visit `http://localhost:8000` for a brand new, Bulma-based, Welcome page!

### Extras

[](#extras)

#### Asset versioning / cache-busting in Production

[](#asset-versioning--cache-busting-in-production)

You need to ensure 2 things happen for this to work:

1. SASS and JS assets need to be compiled using the the `production` settings. To do this, run `yarn production` or `yarn prod`. You can use NPM too of course. But we talked about this!
2. Your Laravel app needs to be in `production` environment. Do this in your `.env` file.

#### Enable the Version Number Badge in `bulma-nav.blade.php`

[](#enable-the-version-number-badge-in-bulma-navbladephp)

1. Add `'version' => env('APP_VERSION', '1.0.0'),` to your `config/app.php` file.
2. Add `APP_VERSION=YOUR_VERSION_NUMBER` to your `.env` file. Replace "YOUR\_VERSION\_NUMBER" with whatever you need.

#### Configure the environment indicator

[](#configure-the-environment-indicator)

This preset also adds an environment indicator to help you distinguish between various app environments your Laravel app can be in (local, dev, staging, production, etc.). It shows up as a thin colored bar at the very top of the page. The color of the bar indicates the app environment.

This works by adding a class-name equal to a hyphenated form of the environment name you set in your `.env` file. You can then configure the colors you want your indicator to have in `resources/sass/app.scss`. Hunt down the following piece of code and change it as needed:

```
// Configure environment-wise colors you need per environment
#env-indicator.local {
    background-color: $primary;
}

#env-indicator.dev {
    background-color: $primary-invert;
}

// Hide the environment indicator on your choice of environments
#env-indicator.production,
#env-indicator.staging {
    display: none !important;
}
```

### Author

[](#author)

Pratyush Pundir
Email:

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

9

Last Release

2704d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/07a09b8c9258d5f23a050d72f8c0e11c6ed18aaf267b17c5cf62fd675d8b77e2?d=identicon)[pratyushpundir](/maintainers/pratyushpundir)

---

Top Contributors

[![pratyushpundir](https://avatars.githubusercontent.com/u/1782464?v=4)](https://github.com/pratyushpundir "pratyushpundir (16 commits)")

---

Tags

laravelbulmalaravel presetslaravel bulma

### Embed Badge

![Health badge](/badges/pratyushpundir-laravel-bulma-preset/health.svg)

```
[![Health](https://phpackages.com/badges/pratyushpundir-laravel-bulma-preset/health.svg)](https://phpackages.com/packages/pratyushpundir-laravel-bulma-preset)
```

###  Alternatives

[highideas/laravel-users-online

This package will provide an online users management.

203113.2k1](/packages/highideas-laravel-users-online)[stephenjude/filament-blog

Filament Blog Builder

20317.8k](/packages/stephenjude-filament-blog)[ralphjsmit/laravel-helpers

A package containing handy helpers for your Laravel-application.

13704.6k2](/packages/ralphjsmit-laravel-helpers)[datomatic/nova-detached-actions

A Laravel Nova tool to allow for placing actions in the Nova toolbar detached from the checkbox selection mechanism.

11229.2k](/packages/datomatic-nova-detached-actions)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)