Do you want to use Template Engine in Spring Boot Project – Thymeleaf is the best. Thymleaf is java library to which communicate between backend (java) and frontend (HTML, Js). It is server-side Java template which helps us to create beautiful HTML / XML templates.

How to Use Thymeleaf and Bootstrap 5 Template Engine in Spring Boot

Thymeleaf can process six types of templates are as follows:

  1. XML
  2. Valid XML
  3. XHTML
  4. Valid XHTML
  5. HTML5
  6. Legacy HTML5

Thymeleaf Features are as follows:

  1. It works on both web and non-web environments.
  2. Java template engine for HTML5/ XML/ XHTML.
  3. Its high-performance parsed template cache reduces I/O to the minimum.
  4. It can be used as a template engine framework if required.
  5. It supports several template modes: XML, XHTML, and HTML5.
  6. It allows developers to extend and create custom dialect.
  7. It is based on modular features sets called dialects.
  8. It supports internationalization.

In this blog, we will learn how to integrate Thymeleaf Template Engine in Java Spring Boot Application. Also we will learn how to add Bootstrap 5 in Spring Boot Thymeleaf. So let’s get started.

Add Thymeleaf Dependency in Spring Boot Project

We believe that you already created a spring boot project. If not you can read our blog – Initial Project Setting – Starter Template for Spring Boot Project. Now lets add spring-boot-starter-thymeleaf dependency in gradle or maven project.

If you are using maven in spring boot, then add following dependency in your pom.xml file:

<dependency>  
   <groupId>org.springframework.boot</groupId>  
   <artifactId>spring-boot-starter-thymeleaf</artifactId>  
</dependency>

Or if you are using gradle project in spring boot, then add following in build.gradle file inside dependencies:

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Once you add the dependency, sync up your project, so that all necessary JAR files are added in your project.

Example of Thymeleaf and Bootstrap 5 in Spring

Here is simple controller, where it shows homepage on "/" and return hompage.html file which resides in your resources/templates folder

// DemoController.java

@Controller
@RequestMapping
public class DemoController {
    @GetMapping("/")
    public String showHomePage(Model model) {
        model.addAttribute("pageName", "HomePage");
        return "homepage";
    }
}

Now lets create a thymeleaf html compatible file. Inside your templates folder, create a file homepage.html. 

<!DOCTYPE html>
<html xmlns:th="https://thymeleaf.org">    
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 text-center">
  <h1>[[${pageName}]]</h1>
  <p>Thymeleaf and Bootstrap 5</p> 
</div>
  
</body>
</html>

In above html, we are using Bootstrap 5 CDN. Note make sure that you always add <html xmlns:th="https://thymeleaf.org"> in .html file.