Using Thymeleaf in Spring MVC to link a .css file to your webpage

I am currently working on a project using spring MVC and Thymeleaf. I have encountered an issue regarding how to reference my CSS files within my folder structure:

src
  main
    webapp
     resources
       myCssFolder
         myCssFile.css
     web-inf
       spring
       views
         myViewFolder
           index.html

This is what my configuration class looks like:

@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/**");
}

In my index file, I reference the CSS as follows:

href="resources/css/bootstrap.min.css"

However, I am experiencing some issues with certain elements on the page not displaying correctly, such as the CSS not being applied properly.

Answer №1

To include CSS files in your HTML using Thymeleaf, you will need to utilize the th:href attribute. In case Thymeleaf is unable to evaluate the value of th:href, it will default to the regular href value.

<head>
    <title>Awesome Thyme Virtual Supermarket</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all"  
      href="../../css/atvs.css" th:href="@{/css/atvs.css}" />
 </head>

Answer №2

I had success with the code snippet below: https://i.sstatic.net/AbCdE.png

Instead of using the static folder, I referenced the CSS file from the css folder path.

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

Answer №3

I encountered a similar issue and found these steps to be very helpful.

  1. Initially, I had the css file located in /resources/css/myCSS.css. I resolved the problem by moving the css file to the root directory as /css/myCSS.css and eliminating the /resources directory altogether.
  2. To link MyCSS properly, I used the following code:

<link th:href="@{/css/MyCSS.css}" href="/css/MyCSS.css" rel="stylesheet" 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

Can you explain the distinction between using a period in a class selector and not using one?

Could someone please clarify the meaning of the code snippet below? <div class="cls1 cls2">abcd <div class="cls2"> adfffff </div> </div> .cls1 { background-color: yellow; } /*sample1 .cls1.cls2 { color: red; } */ /* ...

Ways to verify if one div in jQuery contains identical text to another div

I need help with a jQuery script to remove duplicate text in div elements Here's the requirement: If div1 contains the text "hi" and div2 also contains "hi", then div2 should be removed Below is my current code snippet: <script src="https:/ ...

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

Vue Checkboxes - Maintain selection unless a different checkbox is selected

I have implemented a checkbox system with radio button behavior, but I am facing an issue where I want to keep the checkbox checked until another checkbox is selected (which will then uncheck the first one). I do not want the ability to deselect the checkb ...

Utilizing the Mouse Hover feature to target various <div id> elements within a single Vue.js function

I have created two div IDs in an HTML file where I have specified the mouseover property. <div id="app"> <img class="img-responsive img-full" v-bind:src="imgData" @mouseover="imgData = imgData_1"> </div> <div id="app1"> <img cl ...

A 2x2 Bootstrap grid that spans the full height of the viewport, where each cell has vertical overflow set to auto

I need help creating a grid with 100% height that has the following layout: The second row should expand to fill the remaining vertical space, even if cells C & D have limited content. Additionally, if the content in cell D is too large, I want a ver ...

The implementation of an onclick event in a freshly created HTML element is functioning solely on the final element

One issue I encountered was that when I generated page number buttons at the bottom of a page, the onclick event only worked with the last button created. Below is an example of how the page buttons were displayed: https://i.stack.imgur.com/wHwI0.png ...

What is the best way to choose an Animatedmodal that can showcase various demos while using just one ID?

I am currently customizing my website and utilizing the AnimatedModal.js framework. I have successfully displayed content in one modal, but encountered difficulty when attempting to create multiple modals as they all share the same ID. My question is, how ...

Misplacement of HTML head tags

Is it a grave error in this layout that H1 isn't the first rendered head element? Is there any way to correct this issue? Given that both columns have variable lengths, I am struggling to find a workaround. Reference I was requested to provide a ref ...

PHP problem encountered when trying to assign values to a dropdown menu from an array

Specifically, the error message that I am encountering is: *Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables\index.php on line 38 Notice: Array to string conversion in C:\xampp\htdocs\Project1_Tables ...

What is the best way to extract data from several SQL tables and display it in an HTML/PHP table?

In my database named result, I have two tables named res and sub. Here is an example of the contents in the res table: sno regno name sub1 sub2 sub3 sub4 sub5 1 1DU12CS100 student1 70 80 85 70 90 2 1DU12CS101 ...

Enhance your website with the latest jQuery plugins and CSS

Currently, I am utilizing jQuery to develop plugins for my application. It is worth noting that each plugin demands a distinct CSS file. What approach should I follow to effectively load both the jQuery file and the respective CSS? Moreover, the plugins ...

NuxtJS - Google Auth: ExpiredAuthSessionError: The authentication session has expired because both the token and refresh token have expired. Please try your request

I've been using nuxtjs for some time now. Everything related to authentication was working smoothly until my last update. However, after updating the nuxt.config.js file and moving the axios plugin from the plugins array to the auth config object, an ...

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

Currently, I am attempting to automate the completion of a multi-page form using JavaScript. Below is the script that I am utilizing: // Page 1 document.getElementById("NextButton").click(); // Page 2 completion(document.getElementById("Rec ...

What causes the Top Navbar in Twitter Bootstrap to exceed the container when fixed?

While working with the default fixed-top navbar in Bootstrap, I encountered an issue where it spans the full width of the viewport. In order to contain it within a specific container div, I tried applying a CSS override for the left side: .navbar-fixed-to ...

Techniques for dynamically counting rows in a table using JavaScript

I'm working on a system to create and delete rows, and I want each row to have a unique row number displayed under "Num." However, I'm having trouble implementing this feature. EDIT I found a jQuery snippet that counts the first row but not t ...

jQuery class does not apply correctly in IE9

Currently, I'm designing a menu for a WordPress theme and facing a styling issue. I aim to differentiate between menu items with submenus and those without by applying different styles on hover. Here's the jQuery code snippet I am using: $(docum ...

When accessing the innerHTML and outerHTML properties on an HTMLElement, they may return undefined without triggering

Task: My goal is to take an HTML string, make changes to certain attributes of image tags within it, and then return the modified HTML string. The function I have developed follows these steps: private resolveImagesInHTML (body: string): string { le ...

I am currently encountering a glitch with my video VTT file, as the subtitles are not appearing on screen

welcome to the world of coding WEBVTT 00:01.000 --> 00:8.000 coding is my passion join me on this journey ...

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...