Scribd
Upload
75 views4 pages

Laravel Bootstrap

This document provides instructions for setting up Bootstrap in a Laravel project using Vite. It describes installing Bootstrap and Popper.js via npm, importing Bootstrap Sass and JavaScript into app.scss and app.js files, configuring Vite alias paths, adding Bootstrap imports, building assets with npm, and starting a local PHP server.

Uploaded by

Joshua Emmanuel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
75 views4 pages

Laravel Bootstrap

This document provides instructions for setting up Bootstrap in a Laravel project using Vite. It describes installing Bootstrap and Popper.js via npm, importing Bootstrap Sass and JavaScript into app.scss and app.js files, configuring Vite alias paths, adding Bootstrap imports, building assets with npm, and starting a local PHP server.

Uploaded by

Joshua Emmanuel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like