Thymeleaf - Dynamically Add or Remove a CSS Class - th:classappend Attribute

In this article, we will discuss how to dynamically add and remove CSS class in Thymeleaf templates. 

Using th:classappend attribute

Thymeleaf comes with th:classappend attribute that was created for adding a style class to an element without overwriting the existing defined classes.

The following example shows how to use it conditionally:

<div class="panel" th:classappend="${condition} ? 'white' : 'red'"></div>

If ${condition} is true the rendered website will look like the following:

<div class="panel white"></div>

when ${condition} is false the result will be:

<div class="panel red"></div>

Thymeleaf gives the ability to provide an inline condition without else command, that will look like the following:

<a href="/something" th:classappend="${condition}? 'tag'" class="link">Link</a>

In this case when ${condition} is false, null will be returned and no class will be appended to the attribute.