Is it possible to install Bootstrap 5 on Laravel 8?
After installing Bootstrap 5, jQuery, and Popper.js using the CDN version, I noticed that the dropdown menu and toggle button are no longer working, although my script is functioning correctly.
Here is the installation process I followed: https://www.youtube.com/watch?v=TKqJDWE0Wbo&ab_channel=NelisysDeveloper.
I suspect that there might be something missing regarding Popper.js since Bootstrap utilizes it, or there could be a conflict between JavaScript libraries.
Below are some files that might be helpful:
package.json
{
"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": {
"axios": "^0.21",
"bootstrap": "^5.0.0-beta3",
"fibers": "^5.0.0",
"jquery": "^3.6.0",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^8.0.0"
},
"dependencies": {
"@popperjs/core": "^2.9.2"
}
}
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
bootstrap.js
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');