Add Bootstrap CSS to Thymeleaf

Author:
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:
  1. Using bootstrap CSS CDN remote links
  2. 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>

Comments

  1. Scott16 October 2021 at 14:10

    Nice explanation. There is also a third way, which makes it easier to upgrade. Use webjars.

    ReplyDelete
  2. Solo24 November 2021 at 06:01

    Works fine. Thanks.

    ReplyDelete

Post a Comment

Leave Comment