Instalar Bootstrap 5 con Laravel 9, 10 y 11

Bootstrap es un framework front-end que provee una colección de componentes CSS y JavaScript para construir aplicaciones web responsivas y mobile-first. En las versiones más recientes viene integrado con TailwindCSS.

Prerequisitos

Debes tener instalado en tu sistema Node.js y Node Package Manager (npm), así como un proyecto creado en Laravel 9/10/11.

1. Instalar Bootstrap via npm

Para ello, en la terminal ubicada en la raíz de tu proyecto ejecuta el comando:

npm install -D bootstrap@5.3.3

Este comando instala Bootstrap 5.3.3 como una dependencia de desarrollo para tu proyecto.

2. Instalar el preprocesador SASS para crear los estilos

npm install -D sass

3. Instalar las dependencias de Bootstrap y Sass

npm install

4. Configuración de Vite

Laravel 9/10/11 utiliza Vite como el empaquetador predeterminado, por lo que necesitamos configurar Vite para que incluya nuestros archivos Sass y JavaScript.

Crea un nuevo archivo Sass llamado app.scss o cualquiernombre.scss en el directorio resources/sass.

Abre el archivo vite.config.js en el directorio raíz del proyecto y actualízalo con el siguiente código:

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

export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss', // Nueva línea puede cambiar app.scss por cualquiernombre.scss
'resources/js/app.js',
],
refresh: true,
}),
],
});

Esta configuración le dice a Vite que incluya los archivos app.scss y app.js durante el proceso de compilación.

5. Importar Bootstrap

Abre el archivo resources/js/app.js y añade la siguiente línea:

import './bootstrap'; // nueva línea a importar para CSS axios
import 'bootstrap'; // Bootstrap Framework

Considera que Laravel ya incluye una carpeta llamada bootstrap que se refiere a la carga de Laravel y nada tiene que ver con el framework Bootstrap CSS.

Desde la versión 5.7 a la 8.x, la sintaxis era require('./bootstrap');. A partir de la versión 9.x, el archivo app.js contiene esa línea.

Abre el archivo resources/sass/app.scss e importa los archivos SASS de Bootstrap agregando la siguiente línea en la parte superior del archivo:

@import 'bootstrap/scss/bootstrap';

6. Incluir los estilos y scripts en tu layout

En tu archivo de diseño principal (por ejemplo, app.blade.php), agrega la siguiente línea justo antes de la etiqueta de cierre /head para incluir los archivos CSS y JavaScript compilados:

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

7. Compilar los assets

npm run dev

Este comando compilará tus archivos Sass y JavaScript, incluidos los activos de Bootstrap, para poder utilizar los componentes y utilidades en tu aplicación Laravel.

Referencias

How to Install Bootstrap 5 with Laravel 10 & 11