🧰 Integrar Bootstrap con Laravel

🧰 Integrar Bootstrap con Laravel

Agrega estilo y diseño moderno a tu aplicación

Bootstrap es uno de los frameworks CSS más populares del mundo. En Laravel, puedes integrarlo fácilmente para dar estilo a tus vistas y componentes. Con la ayuda de Laravel Mix, la integración es rápida, limpia y completamente personalizable.

⚙️ Instalación de Bootstrap con NPM

Laravel ya viene preparado para trabajar con Node.js y Laravel Mix, lo que te permite instalar frameworks CSS con un solo comando.

Terminal

npm install bootstrap @popperjs/core

Esto instalará tanto Bootstrap como Popper.js (necesario para tooltips y menús desplegables).

📁 Configurando Laravel Mix

Una vez instalado Bootstrap, edita el archivo webpack.mix.js en la raíz de tu proyecto para compilar los estilos.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps();

Laravel compilará los archivos usando Mix cada vez que ejecutes:

npm run dev

O para una versión optimizada en producción:

npm run prod

🎨 Importar Bootstrap en tu proyecto

Abre el archivo resources/sass/app.scss y agrega:

resources/sass/app.scss

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

Y en resources/js/app.js, importa los scripts de Bootstrap:

resources/js/app.js

import 'bootstrap';
import '../sass/app.scss';

🧩 Usando Bootstrap en tus vistas Blade

Una vez compilados los assets, puedes incluirlos en tus vistas de Laravel. Por ejemplo, en resources/views/welcome.blade.php:

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi App con Bootstrap</title>
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div class="alert alert-success text-center">
      ¡Bootstrap se ha integrado correctamente! 🎉
    </div>
    <button class="btn btn-primary">Probar botón</button>
  </div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

🧪 Simulador: Botones de Bootstrap

Prueba algunos estilos de botones disponibles en Bootstrap:

✅ Buenas prácticas al usar Bootstrap en Laravel

Utiliza npm run watch durante el desarrollo para recompilar automáticamente.
Guarda tus estilos personalizados en archivos separados dentro de resources/sass.
Evita modificar directamente los archivos de Bootstrap: usa variables Sass para personalización.
Usa componentes de Blade con clases Bootstrap para mantener vistas limpias y reutilizables.

🏠 Volver al Índice ➡️ Siguiente tema: 📄 Paginación de resultados

Tags:

Curso Laravel laravel

Posted by: Jorge Catalao

Bienvenido a mi blog de cocina, un espacio donde comparto recetas sencillas que celebran tanto los sabores de hoy como los de ayer. Aquí encontrarás platos fáciles de preparar, con ingredientes accesibles y explicaciones paso a paso, pensadas para quienes disfrutan cocinar sin complicarse. Me inspiro en la cocina tradicional, esos sabores que nos conectan con la infancia y la memoria, pero también en recetas modernas, rápidas y prácticas para el ritmo actual. Desde guisos caseros hasta ideas frescas para todos los días, este blog es para quienes aman el sabor auténtico, sin importar el nivel de experiencia en la cocina. ¡Cocinar puede ser simple, delicioso y hasta divertido! Gracias por estar acá y compartir conmigo esta pasión por la buena comida.

🧰 Integrar Bootstrap con Laravel