Spring boot + Thymeleaf + webjars Bootstrap 4

spring boot webjars
spring boot 2 webjars
spring boot thymeleaf configuration
webjars-locator
thymeleaf spring boot
webjars-locator spring boot 2
webjars spring boot maven dependency
bootstrap page in spring boot

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.

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.

Bootstrap 4 styles not loaded using spring boot with thymeleaf , Here is the way you can add these dependencies in your pom.xml file <​dependency> <groupId>org.webjars</groupId>  Take a deep breath, hold In 4 short and easy commits you'll get a Spring Boot app serving server-side rendered pages via Thymeleaf (with Bootstrap) and Vue.js scripts making use of Axios to make asynchronous requests to the server to update pages with data without reloading the whole page from the server again.

If you are using the org.webjars dependency in your pom.xml, then probably you should add slash / before webjars/... and leave the attribute rel="stylesheet" in your header.html:

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-1/css/bootstrap.min.css} "/>

Also try to run it without MvcConfig configuration class.

Introduction to WebJars, Here's a few popular WebJars: Twitter Bootstrap, jQuery, Angular JS, 4. The Simple App. With these two WebJar dependencies defined, let's Here's a good place to start to set up the Spring MVC and Spring Boot project. Spring Boot Part 4: Spring MVC with Thymeleaf Introduction This series of articles will examine Spring Boot features. This fourth installment discusses Spring MVC, templating in Spring, and creates a simple internationalized clock application as an example.

With Spring Boot, WebJars are auto-configured. There is no need to add any handlers or other configurations. When you run your application (without any configs), you can see a log like this:

... Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]

So deleting your MvcConfig class may resolve the problem. In fact my Spring Boot application was similar to yours (but without that configuration file) and worked perfectly. When I added your configuration to my application, WebJars didn't work anymore!

Spring Boot Hello World Example – Thymeleaf – Mkyong.com, Put spring-boot-starter-web and spring-boot-starter-thymeleaf , it will get anything we need Optional, for bootstrap --> <dependency> <groupId>org.webjars</​groupId> [INFO] | +- org.springframework:spring-web:jar:5.1.4. In the tutorial, we will show you how to build SpringBoot web-application that uses Thymeleaf and Bootstrap 4 Table to access and show data on view.

Also you can fix that by adding webjars dependencies in following way

   <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.3.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.4.0</version>
    </dependency>
   <!-- rest of needed dependecies -->

And by adding them in to your templates header

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
<script th:href="@{/webjars/jquery/3.4.0/jquery.min.js} "></script>

Then if you run your Spring-Boot application and view page source you will get the access to this files, by clicking on the link at the runtime.

Spring + Thymeleaf + Bootstrap 4 "webjars" · GitHub, Spring + Thymeleaf + Bootstrap 4 "webjars". GitHub <html xmlns:th="http://www​.thymeleaf.org">. <head> import org.springframework.boot.context.properties. Download source code and view tutorial: http://bit.ly/2JfHgYq In this tutorial, we show you how to integrate Spring Boot with Bootstrap 4.0.0 and JQuery 3.0.0 using

Using Webjars in Spring Boot application, Webjars are jar (Java Archive) files, which contain client side libraries To bootstrap spring MVC application using Spring Boot, create a main  Learn how to integrate Spring Boot with Bootstrap & jQuery using Web Jars. We will set up a simple web application and add the web jars for these frameworks.

WebJars in Spring Boot Application, In this post, we will discuss how to use Webjars in JSP as well as Thymeleaf with sample code examples. I was exploring a little Spring Boot, and I was having a look at some frontend libraries - which I admit I have almost never seen :) I am probably doing some stupid mistake that makes Bootstrap not working. I am trying to set up a header page. As I hate doing simple things, I am using Spring Boot, Webjars and Thymeleaf. All for the first time.

Spring Boot, We will add the dependencies for Bootstrap and jQuery webjars. We will spring​.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.view.suffix=.jsp  Spring boot webjars: unable to load javascript library through webjar. Ask Question Asked 4 years, 6 months ago. Spring boot + Thymeleaf + webjars Bootstrap 4. 0.

Comments
  • The only working solution!. Thanks mate
  • I also have this problem and nothing seems to work for me.