Laravel Mix with Bootstrap 4

user_10991804 0
Viewed 9691

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.

laravel-8 laravel-mix bootstrap-4 laravel
3 Answers

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.

user_101243570

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">
user_134785340

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

user_133262310
Related