Spring Boot Thymeleaf with Examples

In this article, I am going to discuss Spring Boot Thymeleaf with Examples. Please read our previous article where we discussed Spring Boot Service Components with Examples.

What is Spring Boot Thymeleaf?

Thymeleaf is a Java-based library that can be used to create a web-based application. It has good support for HTML5 as well as XHTML5.

How to Implement Thymeleaf in Spring Boot?

Let us create a web-based application using Thymeleaf and Spring Boot.

Step 1: Create a new project in Spring Initializr in VS Code. Include the spring-boot-starter-web and spring-boot-starter-thymeleaf dependencies.

Step 2: Create a new class called WebController.java in src/main/java/com/dotnet/thymeleaf directory.

Step 3: Modify the newly created file as follows:

We have performed the following modifications:

Imported required packages
Added @Controller annotation to the class.
Added a function that will map the request of http://localhost:8080/index to the index.html file. This file shall be created in the next step.

Step 3: Create a file called index.html in the src/main/resources/templates directory.

Step 4: Modify the HTML file as follows:

Here, we have created a sample HTML webpage file. This file is named index.html. Hence, whenever a client goes to the URL http://localhost:8080/index, they shall be greeted with this webpage.

Step 5: Save and compile the program. Ensure the compilation is successful.

Step 6: Go to http://localhost:8080/index from your web browser. You will see this page:

How to add CSS?

As we know, to make HTML files look a little more than basic, we shall require Cascading Style Sheet (CSS) files. They can also be implemented in Spring Boot.

Follow these steps to implement CSS:

Step 1: Create a new folder called css in src/main/resources/static/ directory.

Step 2: Create a new file called styles.css in the newly created src/main/resources/static/css/ directory.

Step 3: Modify the styles.css file to add styles for h1 and h3. These are the types of text we have used in our HTML file.

The following modifications are made:

The h1 style is red, bold, and written in Arial font.
The h3 style is blue, italic, and written in cursive font.
The body has a background color of blanched almonds.

Step 4: Modify the src/main/resources/templates/index.html file to reflect the new stylesheet:

Step 5: Save and compile the application. Ensure the compilation is successful.

Step 6: Go to http://localhost:8080/index from your web browser. You must be able to see this page:

As can be seen, changes implemented in our CSS file properly reflect on our webpage.

The Complete Example Code

ThymeleafApplication.java

package com.dotnet.thymeleaf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ThymeleafApplication
{
    public static void main(String[] args)
    {
        SpringApplication.run(ThymeleafApplication.class, args);
    }
}

WebController.java

package com.dotnet.thymeleaf;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class WebController
{
    @RequestMapping(value = "/index")
    public String index ()
    {
        return "index";
    }
}

styles.css

h1
{
    color: red;
    font-style: bold;
    font-family: Arial, Helvetica, sans-serif;
}

h3
{
    color: blue;
    font-style: italic;
    font-family: cursive;
}

body
{
    background-color: blanchedalmond;
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <link href = "css/styles.css" rel = "stylesheet"/>
        <title>Spring Boot x Thymeleaf</title>
    </head>
    <body>
        <h1>Welcome!</h1>
        <h3>This application was developed in Spring Boot.</h3>
    </body>
</html>

In the next article, I am going to discuss Spring Boot Thymeleaf Consuming RESTful Services with Examples. Here, in this article, I try to explain Spring Boot Thymeleaf with Examples. I hope you enjoy this Spring Boot Thymeleaf article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.