50% OFF Plus
--:--:--
¡Obtener!

Estilización con Bootstrap CSS

Intermedio
SpringBoot
SpringBoot
Actualizado: 12/06/2025

¡Desbloquea el curso de SpringBoot completo!

IA
Ejercicios
Certificado
Entrar

Mira la lección en vídeo

Accede al vídeo completo de esta lección y a más contenido exclusivo con el Plan Plus.

Desbloquear Plan Plus

Agregar Bootstrap CSS con webjars y usarlo en Thymeleaf

WebJars es una tecnología que permite incluir bibliotecas frontend como Bootstrap directamente desde el repositorio Maven, eliminando la necesidad de descargar y gestionar manualmente los archivos CSS y JavaScript. Esta aproximación mantiene las dependencias organizadas y facilita las actualizaciones de versiones.

Configuración de WebJars en Spring Boot

Para integrar Bootstrap en tu proyecto Spring Boot, necesitas agregar la dependencia correspondiente en tu archivo pom.xml. Spring Boot incluye soporte automático para WebJars, por lo que la configuración es mínima.

Agregar la dependencia de Bootstrap WebJar:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>5.3.6</version>
</dependency>

Agregar la dependencia de WebJars Locator para simplificar las rutas:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.52</version>
</dependency>

El WebJars Locator permite referenciar los archivos sin especificar la versión exacta en las plantillas, lo que facilita las actualizaciones futuras.

Integración con plantillas Thymeleaf

Una vez configuradas las dependencias, puedes referenciar los archivos de Bootstrap desde tus plantillas Thymeleaf utilizando la ruta especial /webjars/. Spring Boot mapea automáticamente esta ruta a los recursos incluidos en los WebJars.

Estructura básica de una plantilla con Bootstrap:

<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi aplicación</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" 
          rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-primary">Bienvenido a mi aplicación</h1>
        <button class="btn btn-success">Botón Bootstrap</button>
    </div>
    
    <!-- Bootstrap JavaScript -->
    <script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
</body>
</html>

Uso de la sintaxis Thymeleaf para recursos

La expresión @{/webjars/bootstrap/css/bootstrap.min.css} utiliza la sintaxis de URL de Thymeleaf para generar la ruta correcta hacia los recursos de Bootstrap. Esta aproximación garantiza que las rutas funcionen correctamente independientemente del contexto de la aplicación.

Ejemplo práctico con componentes Bootstrap:

<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${titulo}">Título por defecto</title>
    <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" 
          rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Mi App</a>
        </div>
    </nav>
    
    <main class="container mt-4">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2 th:text="${encabezado}">Contenido Principal</h2>
                    </div>
                    <div class="card-body">
                        <p th:text="${mensaje}" class="card-text">
                            Mensaje dinámico desde el controlador
                        </p>
                        <a href="#" class="btn btn-primary">Leer más</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="alert alert-info">
                    <h4>Información</h4>
                    <p>Panel lateral con Bootstrap</p>
                </div>
            </div>
        </div>
    </main>
    
    <script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
</body>
</html>

Controlador de ejemplo

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Para completar el ejemplo, necesitas un controlador que proporcione los datos dinámicos a la plantilla:

@Controller
public class HomeController {
    
    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("titulo", "Página principal");
        model.addAttribute("encabezado", "Bienvenido a nuestra aplicación");
        model.addAttribute("mensaje", "Esta página utiliza Bootstrap a través de WebJars");
        return "index";
    }
}

Ventajas de usar WebJars

La integración de Bootstrap mediante WebJars ofrece varios beneficios importantes:

  • Gestión de dependencias centralizada: Las versiones se controlan desde Maven, igual que el resto de dependencias del proyecto
  • Actualizaciones simplificadas: Cambiar la versión en pom.xml actualiza automáticamente todos los archivos
  • Cacheable: Los navegadores pueden cachear eficientemente los recursos servidos desde /webjars/
  • Sin archivos estáticos: No necesitas mantener copias locales de Bootstrap en tu proyecto

Esta aproximación mantiene tu proyecto organizado y facilita el mantenimiento a largo plazo, especialmente cuando trabajas en equipos donde la consistencia de versiones es crucial.

Aprendizajes de esta lección de SpringBoot

  • Comprender qué es WebJars y cómo facilita la gestión de bibliotecas frontend en proyectos Java.
  • Configurar dependencias de Bootstrap y WebJars Locator en un proyecto Spring Boot.
  • Integrar Bootstrap en plantillas Thymeleaf utilizando rutas especiales para recursos.
  • Utilizar la sintaxis de Thymeleaf para referenciar correctamente los archivos CSS y JavaScript de Bootstrap.
  • Implementar un controlador básico que provea datos dinámicos para las plantillas estilizadas con Bootstrap.

Completa este curso de SpringBoot y certifícate

Únete a nuestra plataforma de cursos de programación y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración