SpringBoot

Tutorial SpringBoot: Estilización con Bootstrap CSS

Aprende a integrar Bootstrap CSS usando WebJars en Spring Boot con plantillas Thymeleaf para una gestión eficiente y actualizable.

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

Aprende SpringBoot online

Otras lecciones de SpringBoot

Accede a todas las lecciones de SpringBoot y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Spring Boot

Introducción Y Entorno

Spring Boot Starters

Introducción Y Entorno

Inyección De Dependencias

Introducción Y Entorno

Crear Proyecto Con Spring Initializr

Introducción Y Entorno

Crear Proyecto Desde Visual Studio Code

Introducción Y Entorno

Controladores Spring Mvc

Spring Mvc Con Thymeleaf

Vista En Spring Mvc Con Thymeleaf

Spring Mvc Con Thymeleaf

Controladores Spring Rest

Spring Mvc Con Thymeleaf

Open Api Y Cómo Agregarlo En Spring Boot

Spring Mvc Con Thymeleaf

Servicios En Spring

Spring Mvc Con Thymeleaf

Clientes Resttemplate Y Restclient

Spring Mvc Con Thymeleaf

Rxjava En Spring Web

Spring Mvc Con Thymeleaf

Métodos Post En Controladores Mvc

Spring Mvc Con Thymeleaf

Métodos Get En Controladores Mvc

Spring Mvc Con Thymeleaf

Formularios En Spring Mvc

Spring Mvc Con Thymeleaf

Crear Proyecto Con Intellij Idea

Spring Mvc Con Thymeleaf

Introducción A Los Modelos Mvc

Spring Mvc Con Thymeleaf

Layouts Y Fragmentos En Thymeleaf

Spring Mvc Con Thymeleaf

Estilización Con Bootstrap Css

Spring Mvc Con Thymeleaf

Gestión De Errores Controlleradvice

Spring Mvc Con Thymeleaf

Estilización Con Tailwind Css

Spring Mvc Con Thymeleaf

Introducción A Controladores Rest

Spring Rest

Métodos Get En Controladores Rest

Spring Rest

Métodos Post En Controladores Rest

Spring Rest

Métodos Delete En Controladores Rest

Spring Rest

Métodos Put Y Patch En Controladores Rest

Spring Rest

Gestión De Errores Restcontrolleradvice

Spring Rest

Creación De Entidades Jpa

Spring Data Jpa

Asociaciones De Entidades Jpa

Spring Data Jpa

Repositorios Spring Data

Spring Data Jpa

Métodos Find En Repositorios

Spring Data Jpa

Inserción De Datos

Spring Data Jpa

Actualizar Datos De Base De Datos

Spring Data Jpa

Borrar Datos De Base De Datos

Spring Data Jpa

Consultas Jpql Con @Query En Spring Data Jpa

Spring Data Jpa

Api Query By Example (Qbe)

Spring Data Jpa

Api Specification

Spring Data Jpa

Repositorios Reactivos

Spring Data Jpa

Configuración Base De Datos Postgresql

Spring Data Jpa

Configuración Base De Datos Mysql

Spring Data Jpa

Introducción A Jpa Y Spring Data Jpa

Spring Data Jpa

Configuración Base De Datos H2

Spring Data Jpa

Testing Unitario De Componentes Y Servicios

Testing Con Spring Test

Testing De Repositorios Spring Data Jpa

Testing Con Spring Test

Testing Controladores Spring Mvc Con Thymeleaf

Testing Con Spring Test

Testing Controladores Rest Con Json

Testing Con Spring Test

Testing De Aplicaciones Reactivas Webflux

Testing Con Spring Test

Testing De Seguridad Spring Security

Testing Con Spring Test

Testing Con Apache Kafka

Testing Con Spring Test

Introducción Al Testing

Testing Con Spring Test

Introducción A Spring Security

Seguridad Con Spring Security

Seguridad Basada En Formulario

Seguridad Con Spring Security

Registro De Usuarios En Api Rest

Seguridad Con Spring Security

Login De Usuarios En Api Rest

Seguridad Con Spring Security

Validación Jwt En Api Rest

Seguridad Con Spring Security

Autenticación Jwt Completa En Api Rest

Seguridad Con Spring Security

Seguridad Jwt En Api Rest Reactiva Spring Webflux

Seguridad Con Spring Security

Autenticación Y Autorización Con Anotaciones

Seguridad Con Spring Security

Fundamentos De Autenticación Oauth

Seguridad Con Spring Security

Autenticación Oauth Con Github

Seguridad Con Spring Security

Testing Con Spring Security Test

Seguridad Con Spring Security

Autenticación Oauth En Api Rest

Seguridad Con Spring Security

Introducción A Spring Webflux

Reactividad Webflux

Spring Data R2dbc

Reactividad Webflux

Controlador Reactivo Basado En Anotaciones

Reactividad Webflux

Controlador Reactivo Basado En Funciones

Reactividad Webflux

Operadores Reactivos Básicos

Reactividad Webflux

Operadores Reactivos Avanzados

Reactividad Webflux

Cliente Reactivo Webclient

Reactividad Webflux

Introducción E Instalación De Apache Kafka

Mensajería Asíncrona

Crear Proyecto Con Apache Kafka

Mensajería Asíncrona

Creación De Producers

Mensajería Asíncrona

Creación De Consumers

Mensajería Asíncrona

Kafka Streams En Spring Boot

Mensajería Asíncrona

Integración Con Angular

Integración Frontend

Integración Con React

Integración Frontend

Integración Con Vue

Integración Frontend

Accede GRATIS a SpringBoot y certifícate

Ejercicios de programación de SpringBoot

Evalúa tus conocimientos de esta lección Estilización con Bootstrap CSS con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

En esta lección

Objetivos de aprendizaje 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.