It seems like there might be some confusion between the web.xml and the application-context.xml.

The web.xml file is where you would typically find the declarations for the webapp xsd, as well as the mapping for the Dispatcher Servlet.

 <?xml version="1.0" encoding="UTF-8"?>
 <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <display-name>s-mvc</display-name>
  <servlet>
    <servlet-name>frontController</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
 </web-app>

On the other hand, the application-context.xml is where you would typically find the spring-framework xsd declarations like the example below:

<?xml version="1.0" encoding="UTF-8"?>
 <beans xmlns="http://www.springframework.org/schema/beans"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xmlns:mvc="http://www.springframework.org/schema/mvc"
     xmlns:context="http://www.springframework.org/schema/context"
     xsi:schemaLocation="http://www.springframework.org/schema/mvc  http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

 <mvc:resources mapping="/css/**" location="/css/"/>
 <mvc:annotation-driven />
 <context:component-scan base-package="pl.skowronline.controller" />

 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/"/>
    <property name="suffix" value=".jsp"/>
 </bean>

</beans>

The answer provided by JB Nizet is accurate. However, it appears that the issue with your application goes beyond simply placing CSS/JS files in a specific location. In the case of Spring MVC, proper configuration is crucial for functionality.

To keep things simple, consider placing the CSS folder directly in the WEB-INF folder (/WEB-INF/css). This way, you can easily access it from your page like this:

<a href="<c:url value='/css/bootstrap.css'/>"

This link should lead you straight to the CSS file. If successful, you can switch out the <a> tag for a <link> tag for improved CSS styling.

If issues persist, here are a few areas to investigate:

1) Check for any Spring Security restrictions that may be blocking file access.

2) Consider how various filters/interceptors could be interfering with your ability to access files.

3) Review the Servlet Configuration in web.xml to ensure no dispatchers are impeding access to the CSS file.

In many cases, utilizing <mvc:resources> can handle these tasks automatically. But if problems arise, a manual review may be necessary.

If encountering an <mvc:resources> error:

The matching wildcard is strict, but no declaration can be found for element 'mvc:resources'.

It seems the correct schema has not been declared yet. Consider adding the following lines at the start of your file:

http://www.springframework.org/schema/beans ">

UPDATE:

Based on your feedback, the issue seems to lie here:

<servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

You should adjust it to:

<servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/*.html</url-pattern>
  </servlet-mapping>

This change will prevent conflicts between URLs for CSS/images and controller mappings, allowing mvc:resources to work its magic. Feel free to use any extension you prefer instead of "html." For clean URLs, consider using a library like Tuckey URL rewrite to resolve the issue.

For detailed instructions on how to handle static resources in your Spring application, refer to the relevant section of the official documentation. Once you have followed the guidelines provided there, remember to update your href attribute as follows: Instead of using /css/bootstrap.css, which points to a folder named css directly under the server's root directory, you should prepend the context path of your application.

href="<c:url value='/css/bootstrap.css'/>"

This revised code snippet specifies that the CSS file is located in the css folder under the webapp's root directory. If your web application's context path is /myFirstWebApp, the resulting href will be:

href="/myFirstWebApp/css/bootstrap.css"

One helpful tip is to utilize the context path when searching for resource files.

<link type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" />

For further information, refer to this link.

I encountered the same issue as well. To resolve it, I followed these steps which proved to be effective for me and my team.

Step 1: Create a folder named "resources" in Web-INF

Step 2: Upload your bootstrap, CSS, and JS files to this folder or write them directly inside it

Step 3: Update your dispatcher servlet xml with the following changes:

1. Add the code below within the beans tag:

   <mvc:resources mapping="/resources/**" location="/resources/" />
           <mvc:annotation-driven />
   

   2. Add the code below to xsi:schemaLocation at the top of the xml file:

      ">

Step 4: You can now utilize CSS and Bootstrap resources in your code like so:

<header class="custem_header_bg"><img src="resources/img/product_banner.png" class="img-responsive"> </header>

If you want to set a base on JSP, you can follow these steps instead of setting mvc:resources in web.xml. Simply set the base as shown below. Another option is to use a header file to define this value, which can then be included in any page within the application. This way, there's no need to repeatedly set the value in each JSP file.

To set <base/>, do the following...

<c:set var="req" value="${pageContext.request}" />

<c:set var="url"> ${req.requestURL} </c:set>
<c:set var="uri" value="${req.requestURI}" />

<head>
    <title></title>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />

Now, you can easily import JS or CSS like this...

<script src="assets/js/angular/angular.js"></script>