Spring Boot not loading static files (CSS and JS)

Question

So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.

I have already tried changing the path (as suggested in other similar questions) to something like @{css/styles.css} instead of @{/css/styles.css} but that did not work.

Does anyone know if I'm missing something here?

Below is the HTML file:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
    <div class="content">
        <header>Login Form</header>
        <form action="#">
            <div class="field">
                <span class="fa fa-user"></span>
                <input type="text" required placeholder="Email or Phone">
            </div>
            <div class="field space">
                <span class="fa fa-lock"></span>
                <input type="password" class="pass-key" required placeholder="Password">
                <span class="show">SHOW</span>
            </div>
            <div class="pass">
                <a href="#">Forgot Password?</a>
            </div>
            <div class="field">
                <input type="submit" value="LOGIN">
            </div>
        </form>
        <div class="login">Or login with</div>
        <div class="links">
            <div class="facebook">
                <i class="fab fa-facebook-f"><span>Facebook</span></i>
            </div>
            <div class="instagram">
                <i class="fab fa-instagram"><span>Instagram</span></i>
            </div>
        </div>
        <div class="signup">Don't have account?
            <a href="#">Signup Now</a>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/loginscript.js}"></script>
</body>

Need to see the project structure, particularly the resources folder. — The Head Rush
– The Head Rush, Commented Jan 11, 2021 at 20:09

Marc Collin · Accepted Answer · 2021-01-11 19:44:50Z

1

where is your css folder?

css, js should be in static folder

src
   main
       java
       resources
                static
                      css
                      i18n
                      img
                      js
                templates

answered Jan 11, 2021 at 19:44

Marc Collin

4992 silver badges4 bronze badges

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

1 Comment

Fiach ONeill Over a year ago

Yeah, my project is structured like that!

Chandra Kant · Accepted Answer · 2021-01-11 21:02:57Z

1

Add this in your head tag:

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

Note: Above code will only work if styles.css present in below path:

|--resources
    |--static
        |--css
            |--styles.css

answered Jan 11, 2021 at 21:02

Chandra Kant

2071 silver badge5 bronze badges

Comments

Fiach ONeill · Accepted Answer · 2021-01-12 15:50:48Z

1

This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="@{../static/css/styles.css}". Thanks to everyone who answered!

answered Jan 12, 2021 at 15:50

Fiach ONeill

1551 silver badge18 bronze badges

Collectives™ on Stack Overflow

Spring Boot not loading static files (CSS and JS)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related