Adding CSS and JS Files to Thymeleaf Template

In this tutorial,  we show how to add custom CSS and JS files to Thymeleaf templates in Spring boot MVC applications.

We assume that you have already a Spring boot MVC application and you want to add custom CSS and JS files to your existing application.

Create Spring MVC Controller - DemoController

Within a Spring MVC controller, let's create a handler method to handle the request and return the view:

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

public class DemoController {

    public String demo(){
        return "custom-css-js";

Create Thymeleaf Template

Within the resources/templates folder, let's create a Thymeleaf template named "custom-css-js" and add the below content to it:
<!DOCTYPE html>
<html lang="en"
    <meta charset="UTF-8">
    <link th:href="@{/css/main.css}" rel="stylesheet">
   <div class="center">
       <h2>Page Heading</h2>
       <p>Demo to add custom css and JS to Thymeleaf Template</p>
       <button type="button" th:onclick="showAlert()"> Show Alert</button>
<script th:src="@{/js/main.js}" type="text/javascript"></script>

Create main.css File

Within the resources/static folder, create a new folder named "CSS" and within the CSS folder, let's create a main.css file with the below content in it:
h2 {
    text-transform: uppercase;

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;

p {
    font-size: 15px;

Create main.js File

Within the resources/static folder, create a new folder named "js" and within the js folder, let's create a main.js file with the below content in it:
function showAlert(){
    alert("Add Custom CSS and JS to Thymeleaf Template");

Run Spring Boot Application

Hit this URL in the browser: http://localhost:8080/custom-css-js
Click on Alert Button to call the JavaScript function in the main.js file:

Note that in the first screenshot, the CSS is applied to the HTML elements in the Thymeleaf HTML page, and in the second screenshot the JavaScript function has called. It means that we have successfully added  CSS and JS Files to Thymeleaf Template.

Free Spring Boot Tutorial - 5 Hours Full Course

Watch this course on YouTube at Spring Boot Tutorial | Fee 5 Hours Full Course