Cómo instalar Bootstrap en Laravel

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.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

12 comentarios en “Cómo instalar Bootstrap en Laravel

  1. Buena tarde

    Disculpen, al instalar laravel y ejecutar el comando: npm run dev, me aparecen estos mensajes y n puedo ver el login de forma correcta:

    npm ERR! code ENOENT
    npm ERR! syscall spawn C:\WINDOWS\system32\cmd.exe%C:Archivos de programa\nodejs
    npm ERR! path C:\xampp\htdocs\Firma
    npm ERR! errno -4058
    npm ERR! enoent spawn C:\WINDOWS\system32\cmd.exe%C:Archivos de programa\nodejs ENOENT
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\honorio.alvarezta\AppData\Local\npm-cache\_logs\2021-07-01T20_59_06_163Z-debug.log

    Me podrian apoyar para resolver este problema

    Saludos

    1. No te agarra el bootstrap porque falto explicar que tenias que ejecutar estos comandos para la compilación de los archivos css y js: npm run dev o npm run production en caso de que el proyecto este en produccion, esto sería el paso nro 5 de esta session de instalar bootstrap

  2. porqueria de informacion!
    si me sale la pagina de log in pero estoy buscando que lo estilos se carguen a todo y no hay forma que en todo internet den la informacion que se debe es una porqueria

Responder a david Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”