Using Thymeleaf in Spring MVC, you can easily refer to a .css file by using the th:href attribute

I am having an issue with my index.html thymeleaf page not being able to find the CSS that I have referenced on the page.

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

When I deploy the WAR file in Tomcat, it looks like this: https://i.sstatic.net/RmP1Q.png

The index.html file is located in the templates folder.

However, when checking the Chrome console, I see the following error:

GET http://localhost:8080/pocApp/css/bootstrap.min.css 404 (Not Found)

Even though I can access the index.html page without any issues, the thymeleaf servlet seems unable to locate the CSS file. I have tried moving the entire css directory to different locations within the directory structure such as WEB-INF and WEB-INF/classes, but with no success.

htmlcssspring-mvcthymeleaf

Answer №1

This website is like my virtual rubber duck, helping me solve my own questions. It's the second time I've found the answer on my own.

Within my Spring 4 Java Config, I came across this code:

public class SpringWebConfig extends WebMvcConfigurerAdapter {

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**")
            .addResourceLocations("/resources/");
}

All it took was reorganizing my directories and updating the stylesheet URL.

Here's the updated directory structure: https://i.sstatic.net/YNYiD.png

Also, here's the revised code snippet from my index.html file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What can be done to prevent the mobile version of a website from appearing in Google search results

Our website has distinct versions for both mobile and desktop, rather than being entirely responsive. This means that when the site is accessed on a desktop browser, it displays as the desktop version and likewise for mobile. The issue we are facing is th ...

htmlcssmobiledesktop

The event.target.x attribute on the <i /> tag element

In my code, there is an <i name="documentId" onClick={this.openDocument}/> element with the onClick method defined as follows: openDocument(event) { const { name } = event.target; console.log('name', name); console.log('target&a ...

javascripthtmlreactjs

Retrieve HTML content from Vuetify components without displaying it on the webpage

I have a project where I need to retrieve the HTML code from various Vuetify components. Instead of just as a HTML string, I actually need it as a DOM element that can be easily added to the body. This is necessary for me to be able to utilize these compon ...

javascripthtmlvue.jsdomvuetify.js

Change the parent properties within the child component, and then utilize these modified properties again within the child component

I am currently working on a React application where I am facing a challenge with modifying the props passed from the parent component in my child component. My goal is to update the parent props when a counter is clicked in the child component, and then be ...

javascripthtmlreactjscomponentsstate

Tips for halting the movement of marquee text once it reaches the center briefly before resuming animation

Is there a way to make text slide in, pause when centered, and then repeat the process? I'm looking for some help with this animation. Here is the code snippet: <marquee direction="left" id="artistslide"> <span id="currentartist">< ...

javascriptjqueryhtmlmarquee

Implementing multiline ellipsis without relying on -webkit-line-clamp

Content is dynamically loaded in this p tag. I am looking to implement text ellipsis after a specific line (for example, show text ellipsis on the 4th line if the content exceeds). p { width: 400px; height: 300px; text-align: justify; } <! ...

htmlcss

Unable to scale image to full size using JavaScript

Seeking assistance on optimizing the width of a JavaScript slider to be 100%. Below is my existing HTML: <div id="mhblindsshow"> <style type="text/css"> #mhblindsshow img { display:none; } </style> <a href="blog ...

javascripthtmlcss

Step-by-step guide on incorporating a unique customized ICON widget into Elementor

I am currently working on a unique widget for the Elementor plugin in Wordpress. My goal is to customize the widget ICON, which can be achieved using Elementor's get_icon function where we need to return a class with a :before pseudo-element that wil ...

phpcsswordpresselementor

Add the onmouseover attribute to dynamically alter the text

I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out t ...

htmlcss

Position multiple divs at the bottom of aligned divs

I'm currently facing issues with aligning divs at the bottom within multiple vertically aligned divs. <p>Top of page</p> <div id="container"> <div class="message">area1</div> <div class="message">area2</ ...

htmlcss

A CSS hack for showcasing numerous div elements

I am looking to divide my window into two equal parts, with the same height but each taking up 50% of the width. Here is the CSS I used: .container { display: flex; height : 100%; } .column { flex: 1; height : 100%; } .column-one ...

htmlcssflexbox

Preserving the HTML format of a string stored in MongoDB: Best practices

Currently, I am utilizing AngularJS for my frontend and mongodb for backend database management. For post editing, I rely on textAngular. When creating a new post, such as a service agreement, textAngular automatically adds formatting using HTML tags. &l ...

htmlangularjsmongodbformat

Remove the option to select specific minutes from the time input on an HTML

My HTML code includes a time input that looks like this: <input id="appt-time" type="time" name="appt-time" value="13:30" /> I want to figure out how I can remove the minutes from the input or ensure that the ...

htmltime

The jQuery dropdown menu smoothly expands to reveal all hidden submenu options

I'm currently encountering an issue with jQuery. I am trying to create a responsive drop-down menu with sub-menus. The behavior I want is that if the window width is less than 700px, the submenus will trigger onClick. And if the window is wider than 7 ...

javascriptjqueryhtmlcssmenu

Scrape dynamic web data with JSOUP

Having trouble grabbing the price? I cannot seem to get any output for the price and its weight. I've attempted different methods, but nothing is working Document doc = Jsoup.connect("https://www.jakmall.com/tokocamzone/mi-travel-charger-20a-output- ...

javahtmljsoup

Creating a unique icon using Jquery Mobile for a button in a PhoneGap application

Has anyone experienced issues with using a custom icon for a jQuery mobile button? I am having trouble as it is only showing a grey circle instead of the actual icon. The default icons work fine, though. Here is the code snippet from the index.html page: ...

javascriptcssjquery-mobilecordovajquery-mobile-button

Using only python, launch a local html file on localhost

Currently, I am executing a code on a remote server that periodically creates an "status" HTML file (similar to TensorBoard) and saves it in a directory on the server. To check the status, I download this HTML file whenever needed. However, if I could use ...

pythonhtmlserverxampplocalhost

What steps should be taken to transform a transposed table into one that can be scrolled horizontally?

In the process of creating a comparison table for products, I have designed a table with vertical rows. The header is positioned on the left side, with two or more product descriptions displayed in vertical rows within the table body. To accommodate a scen ...

htmlcsshtml-tablehorizontal-scrolling

Changing the alignment of divs to center instead of the right side

I am currently working on a project that involves creating a tiled interface with responsive tiles. One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try. To see the pro ...

htmlcssalignmentcss-floatmargin

Navigational menu aligned vertically alongside a horizontal subheading

I am in need of assistance with my website's navigation. I am looking to implement a horizontal navigation bar that, when hovered over, will reveal a dropdown sub-navigation with various sections (left and right alignment). Each section will have two ...

htmlcss