Laravel Mix with Bootstrap 4 - laravel

Question

I have been learning Laravel (8) and have enjoyed working with tailwindcss. That said there are some things I still wish to use Bootstrap for. I am having trouble locating documentation on how to set up bootstrap with laravel mix in laravel 8. More specifically, in the resources/css/app.css file we put the following for tailwind:
#tailwind base;
#tailwind components;
#tailwind utilities;
but Im not sure what would go here for bootstrap.
I noticed older versions of laravel used php artisan ui bootstrap but that is not available in Laravel 8 from what I have seen.

Answer 1

Run: npm install --save-dev bootstrap jquery popper.js
How your webpack.mix.js should look:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
How your app.scss should look:
#import '~bootstrap/scss/bootstrap';
How your app.js should look:
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');
This is how you could use generated files in your .blade.php files:
<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<script src="{{ mix('js/app.js') }}"></script>
If you want to customize Bootstrap, copy node_modules/bootstrap/scss/_variables.scss to resources/sass/_variables.scss, change variables you want and change your app.scss to:
#import '~bootstrap/scss/functions';
#import 'variables';
#import '~bootstrap/scss/bootstrap';
You have some helpful documentation on https://getbootstrap.com/docs/4.0/getting-started/webpack/
Laracasts is also quite helpful.

Answer 2

use this steps
npm install bootstrap
npm install #popperjs/core
npm install sass#^1.32
npm install sass-loader
For Bootstrap Sass files, let's create the “scss” folder in /resources and then a new app.scss file in /resources/scss/. Then insert the following line to the /ressources/scss/app.scss file
#import "bootstrap";
For Bootstrap JavaScript, insert the following line to the /resources/js/app.js file :
import "bootstrap";
To compile Bootstrap JavaScript and Sass files with Laravel Mix, you need to edit the /webpack.mix.js file as follows:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass("resources/scss/app.scss", "public/css");
now you can run you command
npm run dev
Now that we have the /public/css/app.css and /public/js/app.js files with Bootstrap included, we can include them on a page (template Blade) via Laravel's asset helper () to use the Bootstrap components
On your Head
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
On your footer
<script src="{{ asset('js/app.js') }}"></script>
now i think he will work enjoy

Answer 3

Seems to be available in Laravel v8.24.0 though.
Be aware that doing this procedure do regenerate the webpack.mix.js.
Steps are:
install laravel ui: composer require laravel/ui
generate scaffolding: php artisan ui bootstrap
optionnaly generate the same for auth: php artisan ui bootstrap --auth
make npm install required packages: npm install
compile assets: npm run dev or npm run production (for development or for production)
Then make sure to have the following in your blade templates:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">