Guía para iniciar un proyecto en Laravel 11 con Bootstrap personalizado

Laravel 11 viene por defecto con TailwindCSS, un framework de utilidades CSS muy popular… pero que no todos dominamos (ni queremos). Si tú, como yo, te llevas mejor con Bootstrap o simplemente te gusta más su sistema de componentes, esta guía es para ti.

Te voy a explicar paso a paso cómo integrarlo en Laravel 11 y además cómo 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, sin rodeos y con buen rollo 😎.

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 11

Primero, tras asegurarnos de que tenemos Composer instalado. Ejecuta este comando para crear tu proyecto en Laravel 11:

composer create-project laravel/laravel:^11.0 nombre-del-proyecto

Cambia nombre-del-proyecto por el nombre real de tu proyecto. Una vez que termine, entramos en la carpeta del proyecto:

cd nombre-del-proyecto

Instala Bootstrap y Sass

Ahora vamos a instalar Bootstrap, Sass y sus dependencias para compilar los estilos personalizados. Ejecuta este comando:

npm install bootstrap sass

Esto 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 un archivo dentro de resources llamado scss para guardar la configuración de las variables que llamaremos _variables.scss y otro que se llamará app.scss dentro de resources/scss donde cargaremos Bootstrap y nuestras variables.

Dentro de resources/scss/_variable.scss definiremos nuestros colores personalizados andes de que Bootstrap los cargue.

$primary: #5E17EB;
$secondary: #6c757d;
$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);

Gracias al sistema modular de Bootstrap con Sass, podemos pasarle nuestras variables y personalizar los estilos desde el principio.

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>
    <h1 class="text-danger">Color de error</h1>
    <h1 class="text-success">Color de éxito</h1>
</div>
@endsection

¡Listo! Ahora ya solo nos falta compilar y levantar el servicio. Para compilar usaremos el comando npm run dev 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.