📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
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