I had a lot of problems with using laravel/ui to install and then use the last updated versions of packages Twitter Bootstrap, jQuery and Popper.js. Since, for example, the Bootstrap version laravel ui installs is outdated, for example on Laravel 8 it is only version 4.6, and the newest version is, as of today: 5.2.2 Bootstrap releases, so i decided to try install the packages by myself using laravel mix.

Installing Twitter Bootstrap, jQuery and Popper.JS in Laravel

Execute the following commands to install it on Mint or Linux Ubuntu:

#We do this because it will take care of a lot of things for us
composer require laravel/ui
php artisan ui bootstrap

#And now we upgrade bootstrap and add new popper.js version
npm install bootstrap@latest @popperjs/core --save-dev

This should install all the node_modules including bootstrap v. 5.2.2, jquery v. 3.6, and @popperjs/core v. 2.10.2.

Our package.json file now looks like this:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }
}

Configure js/bootstrap.js file

We need to require jQuery, Bootstrap and popper.js in resources/js/bootstrap.js file.

To do this, change the code of the file so it looks like this:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('@popperjs/core');
    window.bootstrap = require('bootstrap');

} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Compiling Bootstrap, jQuery and popper with Laravel-mix

After execute all steps before and have changed the correct files, run the npm command to compile the assets:

npm run dev

Test Bootstrap, jQuery and Popper with Laravel Blade

Now you can create a sample Blade page to test if everything is working.

You can use this HTML/JS page that tests them all:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery, popper.js, and Bootstrap</title>
    
    {{--    Load compiled CSS    --}}
    <link rel="stylesheet" href={{ asset('css/app.css') }}>
    
    {{--  popper.js CSS example  --}}
    <style>
        #tooltip {
            background: #333;
            color: white;
            font-weight: bold;
            padding: 4px 8px;
            font-size: 13px;
            border-radius: 4px;
        }
    </style>
</head>
<body>

{{--  Test Bootstrap css  --}}
<div class="alert alert-success mt-5" role="alert">
    Boostrap 5 is working using laravel 8 mix!
</div>

{{--  popper.js HTML example  --}}
<button id="button" aria-describedby="tooltip">My button</button>
<div id="tooltip" role="tooltip">My tooltip</div>

{{--    Load compiled Javascript    --}}
<script src="{{ asset('js/app.js') }}"></script>
<script>
    //Test jQuery
    $(document).ready(function () {
        console.log('jQuery works!');

        //Test bootstrap Javascript
        console.log(bootstrap.Tooltip.VERSION);
    });

    //Test popper.js
    const button = document.querySelector('#button');
    const tooltip = document.querySelector('#tooltip');
    const popperInstance = Popper.createPopper(button, tooltip);
</script>

</body>
</html>

Conclusion

You don’t need to get stuck on the default Bootstrap version that came setted in Laravel 8 projects, just change the correct settings and files to install and use the latest Bootstrap, jQuery and Popper.js versions.