reference a .css file with thymeleaf in spring mvc

html css spring spring-mvc thymeleaf

48,247

Solution 1

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>

Solution 2

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" />

Solution 3

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}" />

48,247

Author by

stackUser2000

Updated on May 26, 2021

Comments

stackUser2000 almost 3 years

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.

ndrone over 9 years

no what @Narresh showed you was an example of how to use th:href
Naresh Vavilala over 9 years

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}"