Cómo instalar Bootstrap en Laravel

En este tutorial vamos a ver cómo instalar y configurar Boostrap en Laravel. Para ello utilizaremos el paquete laravel/ui de PHP mediante Composer. Seguidamente le diremos a Laravel que instale el paquete de Boostrap para Laravel y, finalmente, instalaremos todas las dependencias usando npm.

Introducción

Lo único que necesitarás para seguir este tutorial son ciertos conocimientos básicos acerca de la línea de comandos. Si nunca la has utilizado, consulta el tutorial de la línea de comandos.

También necesitarás tener instalado tanto Node como el gestor de paquetes npm en tu sistema operativo. Si no están instalados en tu sistema, consulta el tutorial de instalación de node y npm.

Finalmente, también deberás tener el gestor de paquetes Composer instalado en tu sistema. Puedes descargarlo desde aquí.

Como detalle adicional, en caso de que no sepas utilizar Boostrap, puedes consultar el tutorial de introducción a Bootstrap.

Configuración inicial

Si aún no has instalado el instalador de Laravel en tu sistema, abre una ventana de terminal e instálalo mediante el siguiente comando:

composer global require laravel/installer

Si todavía no has creado un proyecto, usa el siguiente comando para crear un proyecto con Laravel, reemplezando proyecto por el nombre que le quieras dar al mismo:

laravel new proyecto

Luego accede al directorio del proyecto y usa el siguiente comando para instalar las dependencias de Laravel:

composer install

Instalación de Bootstrap

Para instalar Bootstrap en Laravel basta con que abras una ventana de terminal y sigas los pasos que se describen a continuación:

1. Navega hasta el directorio de tu proyecto y ejecuta el siguiente comando para instalar el paquete laravel/ui:

   composer require laravel/ui

2. Una vez hayas instalado el paquete anterior, debes usar el comando artisan para instalar la última versión de Bootstrap en Laravel:

   php artisan ui bootstrap

   Alternativamente, también puedes usar el siguiente comando para instalar las páginas por defecto de registro, login y gestión de contraseñas de Laravel:

   php artisan ui bootstrap --auth

3. Finalmente ya solo debes descargar el paquete de Bootstrap junto a sus dependencias, entre las cuales se encuentra jQuery:

   npm install

4. Y con esto ya debería estar Bootstrap instalado.

A continuación vamos a ver cómo importar Bootstrap en el proyecto.

Cómo importar Bootstrap

Si vas a user SASS, tendrás que usar diferentes métodos de importación a la hora de importar Bootstrap, en función de si usas Laravel Mix o Vite. Si has instalado las versiones 9 o 10 de Laravel, seguramente estés usando Vite. En otro caso, seguramente estés usando Laravel Mix.

• Si usas Laravel Mix, edita el archivo /resources/app.scss y agrega esta línea al comienzo:

  @import '~bootstrap/scss/bootstrap';

• Si usas Vite, edita el archivo /resources/app.scss y agrega esta línea al comienzo:

  @import "node_modules/bootstrap/scss/bootstrap";

En lo referente a JavaScript, edita el archivo /resources/app.js y asegúrate de que estás importando Bootstrap mediante la siguiente sentencia:

import 'bootstrap';

Resolución de problemas

SI tienes problemas a la hora de importar Bootsrap, seguramente sea porque has configurado mal Laravel Mix (Webpack) o Vite, o quizás porque te has olvidado de importar los archivos JavaScript y y CSS en la cabezera de tus plantillas.

Incluye los recursos en tu plantilla

Si tienes problemas cargando BootStrap o tus recursos compilados, edita tu plantilla de Laravel, en donde defines la cabecera del archivo HTML, que por convención suele ser el archivo /resources/views/layouts/app.blade.php:

• Si usas Vite, debes cargar los recursos CSS y JS mediante la directiva @vite:

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

• Si usas Laravel Mix, debes cargar los recursos tal que así, por separado:

  <!-- Scripts -->
  <script src="{{ mix('/js/app.js') }}" defer></script>
  <!-- CSS-->
  <link href="{{ mix('/css/app.css') }}" rel="stylesheet">

Configuración básica de Laravel Mix

Si tienes problemas a la hora de cargar el código JavaScript o CSS compilado y estás usando Laravel Mix, quizás la configuración del archivo webpack.mix.js sea incorrecta. Esta es la configuración recomendada que deberías tener en este archivo:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
    });

if (mix.inProduction()) {
    mix.version();
}

Configuración básica de Vite

Si tienes problemas a la hora de cargar el código JavaScript o CSS compilado y estás usando Vite, quizás la configuración del archivo vite.config.js sea incorrecta. Esta es la configuración recomendada que deberías tener en este archivo:

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: ['resources/views/**', 'resources/sass/**', 'resources/js/**'],
        }),
    ],
});

Esto ha sido todo.

---