title: Unable to include css and js references in JSP
body: <p>I am trying to add css and js reference libraries into the jsp page, but getting the error <code>404: file not found</code>.</p>
  
  <p>I tried many different ways given at various sites and posts, but could not resolve the issue.</p>
  
  <p>Here is the project structure:</p>
  
  <p><img src="https://i.stack.imgur.com/mlKQv.png" alt="enter image description here"></p>
  
  <p>My <code>web.xml</code> is:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"&gt;
      &lt;display-name&gt;SchoolERP&lt;/display-name&gt;
  
      &lt;servlet&gt;
          &lt;servlet-name&gt;SchoolERP&lt;/servlet-name&gt;
          &lt;servlet-class&gt;com.rms.school.controllers.ControllerHome&lt;/servlet-class&gt;
      &lt;/servlet&gt;
  
      &lt;servlet-mapping&gt;
          &lt;servlet-name&gt;SchoolERP&lt;/servlet-name&gt;
          &lt;url-pattern&gt;/ERP&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;
  
      &lt;welcome-file-list&gt;
          &lt;welcome-file&gt;ERP&lt;/welcome-file&gt;
      &lt;/welcome-file-list&gt;
  
  &lt;/web-app&gt;
  </code></pre>
  
  <p>Main servlet <code>ControllerHome.java</code> contain following code:</p>
  
  <pre><code>@WebServlet({ "/", "/home" })
  public class ControllerHome extends HttpServlet {
      private static final long serialVersionUID = 1L;
  
      /**
       * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
       */
      protected void doGet(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
  
          RequestDispatcher rd = request.getRequestDispatcher("jsp/template.jsp");
          request.setAttribute("content_page", "welcome.jsp");
          rd.forward(request, response);
  
      }
  }
  </code></pre>
  
  <p>and <code>header.jsp</code> file contain following code:</p>
  
  <pre><code>&lt;%@page import="com.rms.school.utils.Config"%&gt;
  &lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  
  &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&gt;
  
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;%
  String title = request.getParameter("title");
  if(title==null){
      title = "Untitled";
  }%&gt;
  &lt;title&gt;
  &lt;%=title %&gt;
  &lt;/title&gt;
  &lt;link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="${pageContext.request.contextPath}/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="${pageContext.request.contextPath}/css/ndt-custom.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="${pageContext.request.contextPath}/css/menu-styles.css" rel="stylesheet" type="text/css"/&gt;
  
  &lt;!-- HTML5 shim for IE backword compatibility--&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;
          &lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  </code></pre>
  
  <p><code>welcome.jsp</code> is simple file containing following code:</p>
  
  <pre><code>&lt;h1&gt;WELCOME !&lt;/h1&gt;
  </code></pre>
  
  <p>And <code>footer.jsp</code> in <code>jsp/include</code> folder contain all closing tags for <code>body</code> and <code>html</code>.</p>
  
  <p>I tried includeing files using tag libraries too. But still problem not resolved.</p>
  
  <p>When I see the output page at <code>http://localhost:8080/SchoolERP/</code>, it is giving the error in firebug as:</p>
  
  <pre><code>"NetworkError: 404 Not Found - http://localhost:8080/SchoolERP/css/bootstrap.css"
  </code></pre>
  
  <p>Whereas the <code>page source</code> shows the <code>head</code> section as follows:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  
  &lt;title&gt;
  Untitled
  &lt;/title&gt;
  &lt;link href="/SchoolERP/css/bootstrap.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="/SchoolERP/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="/SchoolERP/css/ndt-custom.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="/SchoolERP/css/menu-styles.css" rel="stylesheet" type="text/css"/&gt;
  
  &lt;!-- HTML5 shim for IE backword compatibility--&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;
          &lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>When I click on file link in this source, I get error as:</p>
  
  <p><img src="https://i.stack.imgur.com/VdTGZ.png" alt="enter image description here"></p>
  
  <p>Please help me to know where and what I'm doing wrong.</p>
  
  <p>Thanks in advance.</p>