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
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.
Fuentes y referencias
Documentación oficial y recursos externos para profundizar en SpringBoot
Documentación oficial de SpringBoot
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, SpringBoot es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.
Más tutoriales de SpringBoot
Explora más contenido relacionado con SpringBoot y continúa aprendiendo con nuestros tutoriales gratuitos.
Aprendizajes de esta lección
- 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.
Cursos que incluyen esta lección
Esta lección forma parte de los siguientes cursos estructurados con rutas de aprendizaje