In this tutorial, we will learn:
- How to add a bootstrap CSS file to Thymeleaf template
- How to use bootstrap CSS classes in Thymeleaf template
There are two ways we can add a bootstrap CSS file to the Thymeleaf template:
- Using bootstrap CSS CDN remote links
- Downloading Bootstrap CSS file locally, add to project, and finally add a file path to Thymeleaf template
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html
1. Using bootstrap CSS CDN Remote Link
Get the bootstrap CSS CDN remote link from here official website at https://getbootstrap.com/docs/4.1/getting-started/introduction.
Add this link inside the head tag of the HTML page:
<head> <meta charset="ISO-8859-1"> <title>Add Bootstrap to Thymeleaf</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head>
Here is the complete example - adding bootstrap CSS CDN link to HTML file like:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Add Bootstrap to Thymeleaf</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-responsive table-bordered table-striped">
<thead>
<tr>
<th>Employee First Name</th>
<th>Employee Last Name</th>
<th>Employee Email</th>
</tr>
</thead>
<tbody>
<tr th:each="employee : ${employees}">
<td th:text="${employee.firstName}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
2. Add Local Bootstrap CSS File to Thymeleaf
We can download the bootstrap CSS library from the official website here https://getbootstrap.com/docs/4.1/getting-started/download.
Copy-paste this bootstrap CSS file into the static/css folder like:
Let's go back to the Thymeleaf template and add a <link> tag that points to our bootstrap CSS file:
<link th:href = "@{/css/bootstrap.min.css}" rel="stylesheet">
Below code snippet shows how to add a bootstrap CSS file and how to use CSS classes in HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Add Bootstrap to Thymeleaf</title>
<link th:href = "@{/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>
<div class = "container">
<div class = "row">
<table class = "table table-responsive table-bordered table-striped">
<thead>
<tr>
<th> Employee First Name</th>
<th> Employee Last Name</th>
<th> Employee Email</th>
</tr>
</thead>
<tbody>
<tr th:each="employee : ${employees}">
<td th:text="${employee.firstName}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related Thymeleaf Tutorials and Examples
- Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
- Thymeleaf Example with Spring Boot
- How to Add CSS and JS to Thymeleaf
- Add Bootstrap CSS to Thymeleaf
- How to handle null values in Thymeleaf?
- How to Loop a List by Index in Thymeleaf
- Thymeleaf Array Example - Array Index, Array Iteration
- Thymeleaf Enums Example
- Thymeleaf If Else Condition Example
- Thymeleaf Switch Case Example
Nice explanation. There is also a third way, which makes it easier to upgrade. Use webjars.
ReplyDeleteWorks fine. Thanks.
ReplyDelete