Al utilizar el sitio web AlfaVila.com, acepta el uso de cookies para mejorar el nivel de servicio.

Instalar Bootstrap 5 en Laravel 9

1. Instalar Bootstrap 5 y sus dependencias
Para instalar Bootstrap desde la terminal de comandos ejecuta las siguientes instrucciones
npm i bootstrap sass @popperjs/core –save-dev

2. Configurar Vite y dependencias
Cambia el nombre del archivo: resources/css/app.css por: resources/css/app.scss
Abre el archivo vite.config.js que se encuentra en la raíz del proyecto y cambia la referencia resources/css/app.css por resources/css/app.scss

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

En el archivo resources/css/app.scss importa Bootstrap agregando la siguiente línea de código

@import 'bootstrap/scss/bootstrap';

En el archivo resources/js/bootstrap.js añadir siguiente lineas

...
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
...

3. Cambiar .blade para Hot reloading

En el archivo resources/views/welcome.blade.php pega el siguiente código antes de cierre de tag <head>:

...
@vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...

4. Probar
Ejecuta dev server con comando:
npm run dev


1. Install Bootstrap 5 and dependencies
To install Bootstrap from the command terminal execute the following instructions
npm i bootstrap sass @popperjs/core –save-dev

2. Configure Vite and dependencies
Rename the file: resources/css/app.css to: resources/css/app.scss
Open the vite.config.js file found in the root of the project and change the reference resources/css/app.css to resources/css/app.scss

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

In the resources/css/app.scss file import Bootstrap by adding the following line of code

@import 'bootstrap/scss/bootstrap';

In the file resources/js/bootstrap.js add the following lines

...
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
...

3. Change .blade for Hot reloading

In the resources/views/welcome.blade.php file, paste the following code before the closing <head> tag:

...
@vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...

4. Test
Run dev server with command:
npm run dev

Instalar Bootstrap 5 en Laravel 9

Comparte este post

¿Cómo funciona Scrumban?

La metodología Scrumban toma características tanto de la estrategia Scrum como de Kanban. El proceso