Last updated: 2026-09-19

Spring Boot with Thymeleaf and Bootstrap

Thymeleaf and Bootstrap are powerful technologies to develop modern web applications. In this article, we will show the steps to add Thymeleaf and Bootstrap to our Spring Boot application.

The complete setup can also be created directly in the Bootify Builder. Just open a project with start project, choose Thymeleaf as the frontend and Bootstrap as the CSS framework. WebJars provides the lightest setup, while Vite and Webpack bundle the frontend assets. If you don't select a frontend, all the following steps can be followed manually.

Adding Thymeleaf to our app

Thymeleaf renders HTML on the server and is auto-configured by the Spring Boot starter. Its natural templating approach keeps the markup readable in a browser, but server-side processing is still required to resolve th:* attributes and expressions. To set up the engine and a reusable page layout, the following two dependencies are added to our application.

Adding new dependencies for Thymeleaf

The Spring Boot library spring-boot-starter-thymeleaf will automatically integrate the template engine - in the following controller we can already see how this works. The thymeleaf-layout-dialect is recommended for most applications, in order that several pages can use the same layout. We don't need to provide any version here, as they are part of the dependency management plugin of Spring Boot.

A simple MVC controller

Our simple endpoint just shows a list of todos. For this all current todos are loaded from the service first and added to the model. With "todo/list" the template from src/main/resources/templates/todo/list.html is picked up. Unless we configure it otherwise, the template folder is the default one from which the templates are loaded.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout}">
    <head>
        <title>[[#{todoList.list.headline}]]</title>
    </head>
    <body>
        <div layout:fragment="content">
            
            <div th:if="${todoLists.empty}">[[#{todoList.list.empty}]]</div>
            <div th:if="${!todoLists.empty}" class="table-responsive">
                <table class="table table-striped table-hover align-middle">
                    <thead>
                        <tr>
                            <th scope="col">[[#{todoList.name.label}]]</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="todo : ${todos}">
                            <td>[[${todo.name}]]</td>
                            <td>
                                <div class="float-end text-nowrap">
                                    <a th:href="@{/todos/edit/{id}(id=${todo.id})}" class="btn btn-sm btn-info">[[#{todo.list.edit}]]</a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

A simple Thymeleaf Template

After adding our list.html template, we are already using Thymeleaf and Bootstrap classes successfully - the only missing layout will be shown in a moment. To enable real hot reloading during development, it is not enough to switch off template caching. How to read the HTML files directly from the file system is described in this article.

Bootstrap integration using WebJars

Bootstrap is currently the most popular CSS framework and can be integrated directly into our Spring Boot app using WebJars. For this we need another dependency first.

We can now include the JavaScript and CSS files for Bootstrap in our layout.html as follows. Our own JS or CSS can be provided additionally in src/main/resources/static/js and src/main/resources/static/css if needed.

Integration of Bootstrap files in their minimized versions

Bootstrap integration using Vite or Webpack

Alternatively, Bootstrap can be integrated using Vite or Webpack to define how CSS and JavaScript should be bundled for the frontend. If a build tool is already prepared, only one command is needed to add Bootstrap.

Vite usually requires less configuration. Webpack is useful for existing configurations and teams relying on its plugin ecosystem; its complete setup is explained in the article about Spring Boot with Webpack. Both variants provide a development server and are integrated into the Maven or Gradle build.

In the Free plan of Bootify, Spring Boot applications including a frontend can be initialized - directly in the browser, without registration. Thymeleaf with Bootstrap is available with WebJars, Vite or Webpack.

Start Project
No registration required

Create new account

Log in with existing account

Reset your password

Spring Boot with Thymeleaf and Bootstrap

Adding Thymeleaf to our app

Bootstrap integration using WebJars

Bootstrap integration using Vite or Webpack

Further readings

General error