This tutorial is part of this mini project on topic oriented user community. To see all the sections of this project Click Here
Now for this post we need to properly install laravel/ui to use bootstrap for our project
composer require laravel/ui php artisan ui bootstrap npm install
//jquery npm install jquery //select2 npm install select2 npm run dev
Then, Setting up vite.config.js like following
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import path from 'path'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/scss/app.scss', 'resources/js/app.js', ], refresh: true, }), ], resolve: { alias: { '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), '~select2': path.resolve(__dirname, 'node_modules/select2') } } });
Now importing css file for bootstrap and select2 inside resources/scss/app.scss
@import "~bootstrap/scss/bootstrap"; @import "~select2/src/scss/core";
Next, we need to setup master layout file inside resource folder resources/layouts/app.blade.php
<!DOCTYPE html> <html lang="en"> <head> <title>BS5 Laravel Mini Blog</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> @vite('resources/scss/app.scss') </head> <body> <div class="p-5 text-dark text-center"> <h1>BS5 Laravel Mini Blog</h1> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="/">Home</a> </li> </ul> </div> </nav> @yield('content') <div class="mt-5 p-4 bg-dark text-white text-center"> <p>Footer</p> </div> @vite('resources/js/app.js') </body> </html>
So, bootstrap and master layout has been setup. Now, we can move on to the next post.