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 PlusAgregar 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.
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.xmlactualiza 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