Como desarrollar un proyecto Laravel 11 con Jetstream usando Bootstrap 5, sigue este paso a paso.

composer create-project laravel/laravel jetstream.laravel.com
cd jetstream.laravel.com
composer require laravel/jetstream

Cuando ejecutes el siguiente comando, es posible que te pregunte si quieres ejecutar las migraciones, puedes decirles que si siempre y cuando hayas modificado tu archivo .env con los datos de tu base de datos.

php artisan jetstream:install livewire
npm install
npm run build

Solo si no has ejecutado anteriormente la migración hazlo ahora con este comando, previamente modifica tu archivo .env con los datos de tu base de datos.

php artisan migrate

Hasta aquí simplemente hemos instalado Jetstream en Laravel 11, a partir de ahora modificaremos para que ejecute con Bootstrap 5.

npm install -D bootstrap@5.3.3
npm install -D sass

Hecho esto, de forma manual, modifica el nombre de la carpeta resources/css/app.css por resources/sass/app.css y también modifica el archivo que lo contiene app.css por app.scss.

El resultado final deberia ser: resources/sass/app.scss

Como hemos modificado el nombre de la carpeta y el fichero, deberemos modificar también el contenido del archivo vite.config.js, para que la ruta que antes apuntaba a css/app.css apunte a a sass/app.scss, deberia quedar así:


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

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

Dentro del archivo resources/js/app.js deberías tener esto:

import './bootstrap';

Dentro del archivo resources/sass/app.scss deberías tener esto:

@import 'bootstrap/scss/bootstrap';

En tu archivo app.blade.php y en tu archivo guest.blade.php debes modificar esto @vite([‘resources/css/app.css’, ‘resources/js/app.js’] por esto:

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

Hecho todo esto, solo nos queda ejecutar:

npm run dev
npm run build

Para comprobar si ya te está funcionando Bootstrap 5, simplemente modifica cualquier clase de cualquiera de tus vistas con una de Bootstrap 5, por ejemplo usando un botón btn btn-primary, si ves que se muestra como los estilos de Bootstrap 5 es que tu Laravel 11 ya está ejecutando Bootstrap 5.

Ten en cuenta que todos los ficheros que genera Jetstream en la carpeta resources/views, tendrás que modificarlos manualmente modificando las clases con las que correspondan a Bootstrap. He buscado en Internet si existe algun repositorio o alguien que haya hecha pública una carpeta con todos esos ficheros de la vista pero no he encontrado nada, si sabes de algun enlace me lo pones por aquí!

Acerca del Autor

Met El Idrissi

Desarrollador web WordPress freelance y emprendedor tecnológico en aplicaciones web SaaS

Ver Artículos