How to update bootstrap 5 in Laravel?

npm install bootstrap@next

npm install bootstrap@latest

So when you already have a laravel ui in place vue , bootstrap or react it will install bootstrap 4.

Then you decide to upgrade to bootstrap 5 but SASS is not happy about it .. and it will send you notifications when you do npx mix or npm run watch

To fix this you have to downgrade the SASS version.

   "devDependencies": {
    "@popperjs/core": "^2.9.2",
    "axios": "^0.21",
    "bootstrap": "^5.0.1",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "resolve-url-loader": "^3.1.2",
    "sass": "1.26.8",
    "sass-loader": "^11.0.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.12"

Also the new version of bootstrap si not using jquery anymore., so your resources/js/bootstrap.js will look something like this :

window._ = require('lodash');

import 'bootstrap'

window.axios = require('axios');

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

window.axios = require('axios');

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

I hope this helps.