In today’s fast-paced web development landscape, building engaging and responsive web interfaces is crucial for delivering an exceptional user experience. When working with Java, Spring Boot stands out as a popular framework due to its simplicity and efficiency. To enhance user interfaces, the combination of Thymeleaf, a powerful template engine, and Bootstrap 5, a versatile CSS framework, can work wonders. In this blog, we’ll guide you through the process of integrating Thymeleaf and Bootstrap 5 into a Spring Boot project to create dynamic and visually appealing web pages.
Introducing Thymeleaf and Bootstrap 5
Thymeleaf: Thymeleaf is a modern server-side Java template engine used for building web and standalone applications. It stands out for its natural integration with HTML, allowing developers to seamlessly inject dynamic data into their web pages. One of its unique features is its server-side processing, which results in optimized HTML rendering for search engines and improved overall performance.
Bootstrap 5: Bootstrap 5 is a widely-adopted open-source CSS framework that simplifies the creation of responsive and stylish websites and applications. With an extensive set of CSS classes and JavaScript components, Bootstrap enables developers to craft visually appealing designs that adapt seamlessly to different screen sizes and devices.
Advantages of Thymeleaf and Bootstrap 5 in Spring Boot
- Simplified Templating: Thymeleaf’s intuitive syntax streamlines the creation of dynamic web pages by enabling effortless integration of dynamic data into HTML templates.
- Responsive Design: Bootstrap 5’s responsive grid system ensures your web pages look exceptional across various devices, minimizing the need for extensive custom CSS.
- Code Reusability: Both Thymeleaf templates and Bootstrap components can be reused across multiple pages, enhancing development efficiency.
- SEO-friendly: Thymeleaf’s server-side rendering enhances SEO by delivering search engines with pre-rendered HTML.
- Rich User Interface: Bootstrap’s pre-styled components and comprehensive documentation empower developers to swiftly create visually appealing user interfaces.
Prerequisites
Before diving into the example, ensure you have the following:
- Java Development Kit (JDK) installed
- An Integrated Development Environment (IDE) of your choice
- Basic familiarity with Java, Spring Boot, Thymeleaf, and Bootstrap
Note: For this tutorial, we are using our basic skeleton project for springboot. You can also download the project from here.
Setting Up the Spring Boot Project with ThymeLeaf
Step 1: Adding Thymeleaf Dependecies
We believe that you already created a spring boot project. If not you can read our blog – Initial Project Setting – Starter Template for Spring Boot Project. Now lets add spring-boot-starter-thymeleaf dependency in gradle or maven project.
If you are using maven in spring boot, then add following dependency in your pom.xml file:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency> Or if you are using gradle project in spring boot, then add following in build.gradle file inside dependencies:
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'Once you add the dependency, sync up your project, so that all necessary JAR files are added in your project.
Step 2: Bellow is the Project Structure: Organize the project structure as follows:
src
└── main
├── java
│ └── com
│ └── example
│ └── demo
│ └── DemoApplication.java
├── resources
│ ├── static
│ │ ├── css
│ │ │ └── styles.css
│ │ └── js
│ │ └── scripts.js
│ └── templates
│ └── index.html
└── application.propertiesIntegrating Thymeleaf and Bootstrap 5 Example
Step1: Thymeleaf Templating: Create index.html in the templates directory. Incorporate Thymeleaf’s attribute-based syntax and include dynamic data.This is a dynamic example using Thymeleaf and Bootstrap 5.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="container">
<h1 th:text="${greeting}">Hello, Guest!</h1>
<p>This is a dynamic example using Thymeleaf and Bootstrap 5.</p>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="/js/scripts.js"></script>
</body>
</html>Step 2: Dynamic Data Binding: Create a controller named HomeController.java in the controller package. Define a simple Spring MVC controller with a dynamic greeting.
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute("greeting", "Welcome to our dynamic website!");
return "index";
}
}Step 3: CSS and JS (Optional): Add your custom styles and scripts in the styles.css and scripts.js files within the static directory.
Running and Testing the Application
- Build and run the Spring Boot application.
- Open your web browser and navigate to
http://localhost:8080. You should witness your dynamic web page come to life, with Thymeleaf and Bootstrap 5 seamlessly integrated.
Conclusion
By seamlessly integrating Thymeleaf and Bootstrap 5 into your Spring Boot project, you can craft dynamic and visually captivating web pages. Thymeleaf’s dynamic data binding, coupled with Bootstrap 5’s responsive design capabilities, empowers developers to create remarkable user interfaces. This practical example serves as a solid starting point for exploring the potential of these technologies in your own projects. Remember that Thymeleaf and Bootstrap 5 can greatly enhance the user xperience of your Spring Boot applications. Happy coding!
Find this project on Github.