SETUP BOOTSTRAP

Install bootstrap using npm:

npm i --save bootstrap @popperjs/core
npm i --save-dev sass
Import Bootstrap
Setup Bootstrap’s Sass import in vite.config.js.
import {defineConfig} from ‘vite’
import laravel from ‘laravel-vite-plugin’
import path from ‘path’
export default defineConfig({
plugins: [
laravel([
‘resources/scss/app.scss’,
‘resources/js/app.js’,
])
],
resolve: {
alias: {
‘~bootstrap’: path.resolve(__dirname, ‘node_modules/bootstrap’)
}
},
})
Now, let’s import Bootstrap’s CSS. Add the following to resources/scss/app.scss to import all of
Bootstrap’s source Sass.
@import “~bootstrap/scss/bootstrap”;

Next we load the CSS and import Bootstrap’s JavaScript. Add the following to resource/js/app.js
to load the CSS and import all of Bootstrap’s JS.
import ‘./bootstrap’
import ‘../scss/app.scss’

Update resources/js/bootstrap.js
import * as Popper from ‘@popperjs/core’
window.Popper = Popper
import ‘bootstrap’
Next we fill in welcome.blade.php inside the <header> tag. This is the HTML page Vite will load
in the browser to utilize the bundled CSS and JS we’ll add to it.
@vite(['resources/scss/app.scss’,
'resources/js/app.js’])

Running Vite Command to build Asset File

You need npm command to create asset bootstrap.
npm run build

Start Local Server

php artisan serve