2

I am using the Thymeleaf template engine in my Spring Boot MVC application, but am having difficulty loading styless. The link is in the header.html file (located under resources/templates/fragments) and being referenced in login.html (under resources/templates). The stylesheet is located in the resources/static/css directory. 

<head th:fragment="header">
    <link rel="stylesheet" href="../../static/css/bootstrap.css" th:href='@{/css/bootstrap.css}' />
</head>

login.html

<html>
<header th:replace="fragments/header :: header"></header>

<body class="container">

    <h1>Login page</h1>
   // Code omitted for brevity

  </body>

</html>

I have a very typical directory structure: enter image description here

Based upon this question and other sources, is seems that application should be able to load the stylesheet using the specified link. However, this is not the case. Specifically, if I look in my browser's network tab, the request for the stylesheet returns a 302 (not a 404), but the styles are not applied. Furthermore, if I click "Style Editor" tab in Firefox, I receive a Stylesheet could not be loaded: http://localhost:8080/css/bootstrap.css message.

What might the issue be? Thanks.

KellyM
  • 2,472
  • 6
  • 46
  • 90

2 Answers2

0

I think it should be 

href="/static/css/bootstrap.css"

or even

href="static/css/bootstrap.css"

and in general this resource is available under

http(s)://yourdomain/yourApplicationRoot/static/css/bootstrap.css

As basicly this is the path that spring exposes static resources by default.

In your case, it will be @{static/css/bootstrap.css} (or with slash at the beginning)

Antoniossss
  • 31,590
  • 6
  • 57
  • 99
  • Thanks for the response. As it turns out, the link noted in the opening post was correct. The issue was actually due to Spring Security; the 302 was a redirect to the login page. It was my understanding that Spring Security automatically added a filter to make these resources publicly accessible, but I guess that was not the case, which, in hindsight, is actually a sensible, secure default. – KellyM Dec 20 '18 at 13:55
0

your link tag should be

<link href="../../static/css/bootstrap.css" th:href="@{css/bootstrap.css}" rel="stylesheet" media="screen"/>

IMParasharG
  • 1,869
  • 1
  • 15
  • 26