Integrating Bootstrap 4 into Laravel 5.5: Installation, Compilation, and Pagination Views

If you are using Laravel 5.5 or later, you can add Bootstrap 4 quickly by installing the laravelnews/laravel-twbs4 plugin; otherwise follow the manual steps below.

(1) Install Bootstrap and its dependencies

npm install [email protected] popper.js --save-dev

Remove any existing bootstrap-sass entry from package.json and run npm install again.

(2) Import Bootstrap SCSS

// Replace the old bootstrap-sass import
@import "node_modules/bootstrap/scss/bootstrap";

For Laravel 5.5+ you can use the ~ alias instead of node_modules.

(3) Compile Bootstrap JavaScript

Method 1 – compile bootstrap.min.js and manually load jQuery and Popper:

mix.autoload({
    jquery: ['$','window.jQuery','jQuery','window.$','jquery','window.jquery'],
    'popper.js/dist/umd/popper.js': ['Popper']
});
mix.js([
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
], 'public/js/bootstrap.min.js');

Method 2 – use the bundled file that already includes Popper:

mix.autoload({
    jquery: ['$','window.jQuery','jQuery','window.$','jquery','window.jquery']
});
mix.js([
    'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
], 'public/js/bootstrap.min.js');

Both methods produce the same output; the bundled version is slightly smaller when using npm run dev, while in production ( npm run production) the sizes are identical.

(4) Load Bootstrap 4 pagination Blade view

Laravel ships pagination Blade templates for Bootstrap 4. Publish them with php artisan vendor:publish if they are missing, then rename the files:

default.blade.php          → bootstrap-3.blade.php  (old Bootstrap 3 view)
bootstrap-4.blade.php    → default.blade.php      (new Bootstrap 4 view)

Alternatively you can specify the view directly when rendering pagination:

$paginator->links('vendor.pagination.bootstrap-4');

After these steps, your Laravel application will serve Bootstrap 4 styles and scripts, and pagination will render using the new Bootstrap 4 markup.