reference a .css file with thymeleaf in spring mvc

Question

I am doing a project with spring MVC and Thymeleaf. I have a question about how I should reference my CSS files if I have this folder structure:

src
  main
    webapp
     resources
       myCssFolder
         myCssFile.css
     web-inf
       spring
       views
         myViewFolder
           index.html

My configuration class is like this:

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/css/**").addResourceLocations("/css/**");
    registry.addResourceHandler("/img/**").addResourceLocations("/img/**");
    registry.addResourceHandler("/js/**").addResourceLocations("/js/**");
    registry.addResourceHandler("/sound/**").addResourceLocations("/sound/**");
    registry.addResourceHandler("/fonts/**").addResourceLocations("/fonts/**");
}

And I call href in my index file like this:

href="resources/css/bootstrap.min.css"

But there are some elements that are kind of messed up in my page, for example the CSS is not working.

It would be good if you showed the structure of your project as well as the actual HTTP request that is being made to your server for the resource — geoand
– geoand, Commented Sep 24, 2014 at 10:22

Naresh Vavilala · Accepted Answer · 2014-09-23 13:26:34Z

18

You will need to use th:href attribute for referring css files. Here is a sample from thymeleaf tutorial. If thymeleaf can not evaluate th:href value, it defaults to href value.

<head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all"  
      href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
 </head>

answered Sep 23, 2014 at 13:26

Naresh Vavilala

6086 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ndrone Over a year ago

no what @Narresh showed you was an example of how to use th:href

Naresh Vavilala Over a year ago

Your configuration seems to be correct. however, you should have your css files in webapp/css/ folder and you should refer to it using th:href="@{/css/bootstrap.min.css}"

John Douma Mar 19 at 13:43

Perhaps there was a time when this was necessary but I encounter no problems when using the standard href to load a stylesheet into an html file that uses Thymeleaf attributes. Unless parameters are being passed to the linked uri, I see no reason to use th:href.

Afsar Ali · Accepted Answer · 2021-05-26 06:04:30Z

8

I used below and worked ok

here i used from css folder path .. not included static folder

<link rel="stylesheet" type="text/css" media="all" href="/css/index.css" th:href="@{/css/index.css}" />

answered May 26, 2021 at 6:04

Afsar Ali

6158 silver badges17 bronze badges

Comments

Burt Beckwith · Accepted Answer · 2019-04-13 11:59:14Z

6

I have such problem!That steps helped me.

I have the directory /resources/css/myCSS.css. So I had put css into root like /css/myCSS.css and removed directory /resources
I link MyCSS like this:

<link th:href="@{/css/MyCSS.css}" href="/css/MyCSS.css" rel="stylesheet" type="text/css" />

edited Apr 13, 2019 at 11:59

Burt Beckwith

75.8k5 gold badges145 silver badges157 bronze badges

answered Jun 28, 2015 at 15:03

Максим Кмец

1011 silver badge2 bronze badges

Collectives™ on Stack Overflow

reference a .css file with thymeleaf in spring mvc

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related