Spring Boot CSS Showing Up Blank/Not Loading After Trying Everything

Spring Boot CSS Showing up blank / not loading after trying everything

I believe you should read this, how to serve static content:

http://docs.spring.io/spring-boot/docs/1.4.2.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content

To sum it up, your browser is caching your static resources, such as CSS files.

In order to break this behavior, try first clean your browser cache, in google chrome you go to settings then clear browsing data.

Secondly, add these lines to your application.properties file in order to bust the cache:

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

or add this instead:

spring.resources.chain.strategy.fixed.enabled=true
spring.resources.chain.strategy.fixed.paths=/**
spring.resources.chain.strategy.fixed.version=v12

CSS is not linking up and not working with Spring Boot application

In the Spring-boot documentation you can read where Spring-boot reads static resources by default.

By default Spring Boot will serve static content from a directory
called /static (or /public or /resources or /META-INF/resources) in
the classpath or from the root of the ServletContext. It uses the
ResourceHttpRequestHandler from Spring MVC so you can modify that
behavior by adding your own WebMvcConfigurerAdapter and overriding the
addResourceHandlers method.

If you change the location of your static files to the default one you should be able to reach them by /css/style.css

P.S. here you can find a simple good structured example.

Spring Boot CSS stripped

If you check your browser console (e.g. in Chrome), my guess you will see HTTP 404 Not found for your CSS files. The problem is with your URL path to CSS.

The main point is that there is a difference how files (.html, .css) are stored in your JAR file (or in your source code) and how they are served by HTTP server. As far as I see you are using thymeleafs and therefore (my guess again), your HTML template files can be served for different kind of URLs (like /, /book/23 etc.) and therefore I don't recommend to address CSS files with relative URLs (as you did).

As CSS files are stored in static directory, they should be automatically served by spring boot for /** pattern, ie. if you don't use any context path, your CSS should have following URL: /css/main.css.

If you want to be very correct and be prepared that your web application can be in different "context", you should use something like <link rel="stylesheet" th:href="@{/css/main.css}">

CSS not loading in spring boot application

Spring Boot knows where the static directory is, so you don't need to use the ../ technique to get to the files within. The other part is that you should be using an annotation to get there. It may depend on what view template you are using, but for thymeleaf this is how you would achieve pulling in the css file:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Your Title</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>

Notice the annotation in th:href="@{/css/style.css}"

Make sure you include the namespace of your view template, th in the example.

Images work the same way:

<img th:src="@{/img/stanev2.png}" />

Spring Boot CSS Showing Up Blank/Not Loading After Trying Everything