How to include CSS file in Spring MVC with Thymeleaf?

Question

I'm building a Spring MVC application with Thymeleaf as the template language. I tried so many things but I was not able to include my CSS file in my Thymeleaf templates. What am I doing wrong?

My project structure is as follows.

project
    src/
        main/
            java/
            resources/
    web/
        WEB-INF/
            web.xml
            dispatcher-servlet.xml
            views/
                css/
                    bootstrap.min.css (and other css files)
                index.html

And my index.html looks as follows.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>Hello Spring MVC</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
</head>
<body>
...
</body>
</html>

When I run my application, the index.html is shown, but the css is not found.

How do I need to include the css?

Your code looks absolutely fine. Problem is somewhere else. Do you have Spring Security configuration by any chance? E.g. Spring Sec. will block access to your CSS if you do not allow it explicitly. Or how about to show your configuration classes/XML's generally. — Branislav Lazic
– Branislav Lazic, Commented Mar 24, 2017 at 17:01

Ollie in PGH · Accepted Answer · 2017-03-24 14:27:20Z

4

Did you try to remove the leading "/"? Like this:

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

Did that work?

Also, many IDE's will allow you to drag and drop a file which will create a link to that file. In Netbeans for example, you can drag a file from the project navigator onto an HTML (or HTML-like) open file and it will create a link.

Try:

project
src/
    main/
        java/
        resources/
            static/ 
                bootstrap.css

edited Mar 24, 2017 at 14:27

answered Mar 24, 2017 at 13:15

Ollie in PGH

2,6392 gold badges18 silver badges19 bronze badges

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

4 Comments

Said Savci Over a year ago

I just tried, it doesn't work. I also tried using drag/drop, but it creates the same link as above (css/bootstrap.min.css).

Ollie in PGH Over a year ago

I've looked at an older Spring boot repo of mine and I put the CSS under resources / static. In the main directory. So it's in src / main / resources / static / my.css See if your templates can find it there.

Said Savci Over a year ago

Do you have any mapping for the folders?

Ollie in PGH Over a year ago

I did not specifically map anything. It was an older version of Boot and at the time it just looked in the resources folder for web-facing files --it might be different now.

N4zroth · Accepted Answer · 2017-04-06 09:02:12Z

1

Did you configure your resource handler correctly? I. e.

@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
    super.addResourceHandlers(registry);
    // ...
    registry.addResourceHandler("/css/**")
        .addResourceLocations("classpath:/views/css/");
    // ...
}

XML configuration example can be seen here

answered Apr 6, 2017 at 9:02

N4zroth

1,3762 gold badges10 silver badges27 bronze badges

1 Comment

dmalechek Over a year ago

Agreed, this should be the right answer. Has to found as resource, has to have the right the right link syntax, and has to be permitted.

Collectives™ on Stack Overflow

How to include CSS file in Spring MVC with Thymeleaf?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related