Instalar Bootstrap en Laravel usando Laravel UI

 Instalar Bootstrap en Laravel usando Laravel UI

Este tutorial te guiará paso a paso para instalar y configurar Bootstrap en un proyecto Laravel utilizando el paquete oficial laravel/ui.

Prerrequisitos

  • Tener Composer instalado

  • Tener Node.js y npm instalados

  • Un proyecto Laravel existente

Paso 1: Instalar Laravel UI

Primero, instala el paquete laravel/ui mediante Composer:

bash
composer require laravel/ui

Paso 2: Generar los archivos de autenticación y scaffolding de Bootstrap

Ejecuta el siguiente comando para generar el scaffolding de Bootstrap:

bash
php artisan ui bootstrap

Si también quieres incluir el sistema de autenticación (login, registro, etc.):

bash
php artisan ui bootstrap --auth

Paso 3: Instalar las dependencias de npm

Instala todas las dependencias de JavaScript incluyendo Bootstrap:

bash
npm install

Paso 4: Compilar los assets

Compila los archivos CSS y JavaScript:

bash
npm run dev

Para compilar en modo de desarrollo con watch (recompila automáticamente al hacer cambios):

bash
npm run watch

Para compilar en modo producción (minificado):

bash
npm run prod

Paso 5: Verificar la estructura generada

Después de ejecutar los comandos, se habrán creado/modificado estos archivos:

Archivos CSS/JS principales

  • resources/sass/app.scss - Importa Bootstrap y estilos personalizados

  • resources/js/bootstrap.js - Configuración de JavaScript

  • resources/js/app.js - Punto de entrada principal de JavaScript

Layout por defecto

Se crea/actualiza resources/views/layouts/app.blade.php que incluye:

  • Directivas para cargar CSS y JS compilados

  • Estructura básica con navbar responsive

  • Espacio para el contenido (@yield)

Paso 6: Usar el layout de Bootstrap

En tus vistas, extiende el layout de Bootstrap:

blade
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Paso 7: Personalizar Bootstrap (Opcional)

Modificar variables de Bootstrap

Edita resources/sass/_variables.scss (crea el archivo si no existe) para personalizar colores, fuentes, etc.:

scss
// Variables de Bootstrap personalizadas
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;

// Importar Bootstrap
@import '~bootstrap/scss/bootstrap';

Añadir estilos personalizados

En resources/sass/app.scss, añade tus estilos después de importar Bootstrap:

scss
// Variables personalizadas
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Estilos personalizados
body {
    font-family: 'Nunito', sans-serif;
}

.custom-class {
    background-color: theme-color("primary");
}

Estructura final de archivos importantes

text
resources/
├── js/
│   ├── app.js
│   └── bootstrap.js
├── sass/
│   ├── app.scss
│   └── _variables.scss
└── views/
    └── layouts/
        └── app.blade.php

Comandos útiles para el desarrollo

bash
# Compilar una vez
npm run dev

# Compilar y observar cambios
npm run watch

# Compilar para producción
npm run prod

# Limpiar cache de Laravel (si es necesario)
php artisan optimize:clear

Solución de problemas comunes

Si los estilos no se aplican:

  • Verifica que hayas ejecutado npm run dev

  • Asegúrate de que el layout incluye <link href="{{ asset('css/app.css') }}" rel="stylesheet">

Si hay errores de compilación:

  • Ejecuta npm install nuevamente

  • Verifica que tengas Node.js y npm instalados correctamente

¡Ahora tienes Bootstrap completamente integrado en tu proyecto Laravel!

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo usar php artisan ui:auth en Laravel

 https://www.youtube.com/watch?v=IVHCTxexJ9s https://www.youtube.com/watch?v=w44cAHQ-Fdk Cómo usar  php artisan ui:auth  en Laravel El comando  php artisan ui:auth  es una herramienta poderosa en Laravel que genera automáticamente las vistas, rutas y controladores necesarios para un sistema de autenticación completo. Pasos para implementar la autenticación 1. Crear un nuevo proyecto Laravel (si no tienes uno) bash laravel new mi-proyecto cd mi-proyecto 2. Ejecutar el comando de autenticación bash php artisan ui:auth 3. Ejecutar las migraciones bash php artisan migrate ¿Qué genera este comando? Vistas de autenticación : login, registro, recuperación de contraseña y reset de contraseña Rutas : Todas las rutas necesarias para el flujo de autenticación Controladores : AuthController, LoginController, RegisterController, etc. Layout básico : Un diseño base para las vistas Personalización Puedes especificar el framework de frontend que deseas utilizar: bash # Con Boo...
Leer más

Te explico cómo configurar el sistema de login en Laravel paso a paso

 https://www.youtube.com/watch?v=l6rlBIhjEs0 Te explico cómo configurar el sistema de login en Laravel paso a paso: 1. Instalación y configuración inicial Primero, asegúrate de tener Laravel instalado y configurado: bash composer create-project laravel/laravel mi-proyecto cd mi-proyecto 2. Configurar la base de datos En el archivo  .env , configura tu base de datos: env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=nombre_base_datos DB_USERNAME=usuario DB_PASSWORD=contraseña 3. Instalar el paquete de autenticación Laravel incluye un scaffolding para autenticación: bash composer require laravel/ui php artisan ui bootstrap --auth npm install && npm run build 4. Migraciones Ejecuta las migraciones para crear las tablas necesarias: bash php artisan migrate 5. Modelo User El modelo User ya viene incluido. Puedes personalizarlo si necesitas: php <?php // app/Models/User.php namespace App \ Models ; use Illuminate \ Foundation \ Auth \ User ...
Leer más

Tutorial para instalar y usar Laravel Assets

  Tutorial para instalar y usar Laravel Assets Te guiaré paso a paso para instalar y usar assets (recursos estáticos como CSS, JavaScript, imágenes) en Laravel. 1. Estructura de directorios de assets en Laravel Laravel organiza los assets en la carpeta  public/ : text public/ ├── css/ ├── js/ ├── images/ └── index.php 2. Métodos para incluir assets Método 1: Usando la función  asset()  (Recomendado) php < ! -- En tus vistas Blade -- > < link href = "{{ asset('css/app.css') }}" rel = "stylesheet" > < script src = "{{ asset('js/app.js') }}" > < / script > < img src = "{{ asset('images/logo.png') }}" alt = "Logo" > Método 2: Usando URL absoluta php < link href = "/css/app.css" rel = "stylesheet" > Método 3: Usando Mix (para assets compilados) php < link href = "{{ mix('css/app.css') }}" rel = "stylesheet" > 3. Configura...
Leer más