Bootstrap 4 Laravel Package

Getting Started

The package adds a single artisan command that rewrites Laravel 5.5's front-end scaffolding from Bootstrap 3 to Bootstrap 4.

composer require laravel-frontend-presets/bootstrap-4 --dev

Register the provider in config/app.php (the package does not auto-discover on 5.5):

'providers' => [
    // ...
    LaravelFrontendPresets\Bootstrap4Preset\Bootstrap4PresetServiceProvider::class,
],

Then run the preset and rebuild assets:

php artisan preset bootstrap-4     # confirm the exact name in `php artisan list`
npm install
npm run dev

Where to look first: after running the preset, diff the files it touched — package.json, resources/assets/js/bootstrap.js, resources/assets/sass/app.scss, and resources/assets/sass/_variables.scss. Those four files are the entire substance of the package; everything else is Laravel's own scaffolding.

First use case: you have a fresh 5.5 app (or one you've just reset with php artisan preset none) and want flexbox grid, .card, and the BS4 utility system in your Blade views without hand-editing Sass imports and Popper wiring. The preset's real value is bootstrap.js correctly importing popper.js and exposing window.Popper before the Bootstrap plugins — the part people usually get wrong by hand.

Implementation Patterns

Customize variables before the import. The generated app.scss follows the BS4 convention:

@import 'variables';          // your $primary, $body-bg, $font-size-base, $grid-breakpoints
@import '~bootstrap/scss/bootstrap';

Every override in _variables.scss must precede the Bootstrap import and relies on !default semantics — redeclaring a variable after the import silently does nothing. Keep app-specific rules in a _custom.scss imported last so you can re-run the preset without losing them.

Vendor chunking. The preset drops plain mix.sass().js() into webpack.mix.js. For any real app, split the vendor bundle so app code rebuilds fast:

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['jquery', 'bootstrap', 'popper.js'])
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();

Then include public/js/manifest.js, vendor.js, app.js in that order.

Plan the auth views separately. php artisan make:auth generates Bootstrap 3 markup (panel, panel-body, col-md-offset-4, navbar-default, pull-right). The preset does not touch views. Budget a pass converting to BS4: card/card-body, offset-md-4, navbar-light bg-light, float-right, and input-group-addon → input-group-prepend/input-group-text. This is usually the larger half of the migration.

CI / container builds. The preset is a one-time scaffolding step, not a build step. Run it once, commit the generated resources/assets/** and package.json, and let CI run only npm ci && npm run production. Re-running the preset in a pipeline will clobber any Sass customizations you committed.

Gradual adoption on an existing app. Don't run the preset against a live project. Copy the relevant pieces — the Popper-before-Bootstrap ordering in bootstrap.js and the _variables.scss scaffold — into your existing build, then migrate views component by component (panel → card, col-xs-* → col-*, .hidden-* → .d-*-none).

Gotchas and Tips

• Hard-capped at Laravel 5.5.x. The package writes to resources/assets/{js,sass}, which is the 5.5/5.6 layout. Laravel 5.7 moved assets to resources/js and resources/sass, and Laravel 6 removed php artisan preset entirely. On 5.6+ the built-in php artisan preset bootstrap already yields Bootstrap 4, making this package redundant. Treat it as a legacy-maintenance tool, not a greenfield choice — the repo is unmaintained, so pin the version and expect no fixes.
• It overwrites, it does not merge. package.json, app.scss, bootstrap.js, and webpack.mix.js are replaced wholesale. Commit or stash first; there is no dry-run flag.
• Popper version drift. BS4.0 wanted popper.js@^1.11; later 4.x needs ^1.16. If dropdowns throw Popper is not defined or bootstrap requires Popper.js, check that bootstrap.js sets window.Popper = require('popper.js').default before requiring bootstrap, and that only one Popper version exists in the tree (npm ls popper.js).
• Bootstrap 4 is not a drop-in for BS3 markup. Glyphicons are gone; col-xs-*, navbar-default, panel, well, pull-left/right, and img-responsive all removed or renamed. Grep your Blade views for these before declaring the migration done — nothing will error, it will just look broken.
• Stale-asset debugging. If a Sass variable change doesn't appear, check public/css/app.css mtime, clear the mix-manifest.json cache, and confirm mix() (not a hardcoded path) is in your layout. When node-sass/sass-loader chokes after the preset's package.json swap, rm -rf node_modules package-lock.json && npm install resolves most of it.
• jQuery still required. BS4's JS plugins depend on jQuery. If you want jQuery-free, swap in bootstrap.native or jump straight to Bootstrap 5 — the preset gives you nothing toward that.
• Extension points are the stubs themselves and the PresetServiceProvider. If the provider tags its stubs, php artisan vendor:publish lets you fork the generated app.scss/bootstrap.js into your app permanently, which is the sane move: run the preset once, then own the files and drop the dev dependency.
• Modern equivalent for anything post-5.5: composer require laravel/ui then php artisan ui bootstrap, or on Laravel 9+ with Vite, install Bootstrap directly and write the Sass entry point yourself — it's five lines and you avoid an abandoned dependency.