Spring boot + Thymeleaf + webjars Bootstrap 4
I'm trying to add bootstrap to my Spring Boot project using Thymeleaf.
index.html
<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"> </head>
<body>
<div th:replace="@{'views/' + ${content}} :: ${content}"></div>
<div lang="en" th:replace="fragments/footer :: footer"> </div>
</body>
</html>
footer.html
<div xmlns:th="http://www.thymeleaf.org" th:fragment="footer" >
<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.0.0-1/js/bootstrap.min.js}" ></script>
</div>
header.html
<head xmlns:th="http://www.thymeleaf.org" th:fragment="header" >
<meta charset="UTF-8">
<title>Модуль планирования ПД</title>
<link th:rel="stylesheet" th:href="@{webjars/bootstrap/4.0.0-1/css/bootstrap.min.css} "/>
</head>
MvcConfig.java
@Configuration
public class MvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/webjars/**")
.addResourceLocations("/webjars/")
.resourceChain(false);
}
}
Styles doesn't applied to page and throwing error:
in jquery, bootstrap, popper.
How I can solve this problem?
Thanks.
Answer
To make more easy I got webjars-locator:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0-2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
And at my page, at the end, I put:
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
I did not use any other setup in Spring boot to work with.