Aunque Laravel se integra fácilmente con Tailwind CSS gracias a sus starter kits, no todos dominamos ese framework (todavía). Si como yo, prefieres Bootstrap, esta guía es para ti.
Te voy a explicar paso a paso cómo integrarlo en Laravel y a cambiarle los colores a tu gusto, para que el diseño de tu web no se vea como el de todos los demás.
Todo esto usando herramientas modernas como Vite, Sass y el sistema modular de Bootstrap 5+, pero explicado de forma clara y sin rodeos 😎.
Requisitos previos
Antes de empezar, debemos asegurarnos de tener instalado en nuestro sistema las siguientes herramientas.
✅ PHP 8 o superior
✅ Composer
✅ Node.js y npm
✅ Visual Studio Code
Crear un nuevo proyecto en Laravel
Primero, tras asegurarnos de que tenemos Composer instalado. Ejecuta este comando desde tu terminal favorita para crear tu proyecto en Laravel:
composer create-project laravel/laravel nombre-del-proyectoUna vez que termine la instalación, entramos en la carpeta del proyecto:
cd nombre-del-proyectoInstala Bootstrap y Sass
Ahora vamos a instalar Bootstrap, Sass y sus dependencias para compilar los estilos personalizados. Desde la terminal ejecuta este comando:
npm install bootstrap sassEsto ya deja todo preparado para trabajar con los estilos en formato .scss, lo que nos permite personalizar colores de Bootstrap y más.
Estructura de archivos de estilos
Ahora vamos a crear una carpeta llamada scss dentro de la carpeta resources de nuestro proyecto. En esta carpeta crearemos dos archivos. _variables.scss donde vamos a guardar la configuración de las variables de Bootstrap y app.scss donde cargaremos Bootstrap y nuestras variables
Dentro de resources/scss/_variable.scss definiremos nuestros colores personalizados antes de que Bootstrap los cargue.
$primary: #5E17EB;
$success: #FB8C00;
$danger: #FF0074;Dentro de resources/scss/app.scss estableceremos la configuración para importarla a Bootstrap.
@use "variables" as vars;
@use "bootstrap/scss/bootstrap" with ($primary: vars.$primary,
$success: vars.$success,
$danger: vars.$danger);Además, también modificaremos el JS para poder importar la información de Bootstrap correctamente. Modificaremos el archivo resources/js/app.js
import 'bootstrap';Editar Vite para compilar los nuevos estilos
Ahora vamos al archivo vite.config.js y nos aseguraremos de que está apuntando al archivo app.scss en lugar de app.css.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});Actualización de la vista Blade principal
Para este apartado, vamos a crear dentro de resources/views/ una carpeta llamada layouts y dentro de esta un archivo llamado app.blade.php. Esta nos servirá como layout principal para nuestra ejemplo.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Styles / Scripts -->
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
<body class="antialiased">
@yield('content')
</body>
</html>También modificaremos el archivo que viene por defecto dentro de resources/views/welcome.blade.php para que cargue un ejemplo de la modificación que estamos realizando. En este caso usaremos de ejemplo unos encabezados con distintos colores.
@extends('layouts.app')
@section('content')
<div class="flex flex-col justify-center items-center min-h-screen">
<h1 class="text-primary">Color primario</h1>
<h2 class="text-danger">Color de error</h2>
<h3 class="text-success">Color de éxito</h3>
</div>
@endsection¡Listo! Ahora ya solo nos falta compilar y levantar el servicio. Para compilar usaremos el comando npm run dev desde la terminal y tras esto, en otra terminal levantamos el servidor con el siguiente código php artisan serve.
¡Voilà! Tu Bootstrap tuneado
Ya puedes usar clases como text-primary, btn-success o bg-danger y ver tus propios colores en acción. 🎨
Esta configuración no solo te permite usar Bootstrap, sino que además te da el control total del diseño. Si quieres seguir personalizando más cosas (fuentes, breakpoints, etc.), lo puedes hacer desde el archivo _variables.scss sin miedo.
