Encountering a problem with loading the stylesheet

I keep encountering a 404 error when trying to load the CSS in my web application. The HTML content looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>PSL Inter App</title>
    <meta name="description" content="PSL Inter app for accounting"/>
    <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
    <!-- Loading Bootstrap -->
    <link href="WEB-INF/css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
    <!-- Loading Flat UI -->
    <link href="WEB-INF/css/flat-ui.css" rel="stylesheet" type='text/css'>
    <link href="WEB-INF/css/assets/demo.css" rel="stylesheet" type='text/css'>

    <!-- <link rel="shortcut icon" href="img/favicon.ico"> -->
</head>
<body>
<div class="col-xs-3">
Please Login!!
    <div class="form-group">
          <input type="text" value="" placeholder="Username" class="form-control">
    </div>
 </div>
</body>
</html>

My file directory structure is as shown below:

https://i.sstatic.net/DSfWV.jpg

Any assistance would be greatly appreciated!

Thank you!

Answer №1

Discovering the main folder of your application is crucial. Utilizing

<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
could aid you in this process.

Answer №2

Make sure your CSS path is accurate:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Make sure to load Flat UI stylesheet -->
<link href="css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="css/assets/demo.css" rel="stylesheet" type='text/css'>

Answer №3

After relocating the css folder from WEB-INF to WebContent and making the necessary adjustments, I am happy to report that it is now functioning perfectly!

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="css/assets/demo.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

How to display an HTML element conditionally with v-if based on a variable's value

Looking for a way to display a <div> element, including nested <div>s, based on the value of a variable. I'm currently using v-if, but open to better suggestions. I attempted wrapping the entire <div> in a <template v-if> as s ...

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...

Customize Individual Rows in a React DataGrid

I am exploring the world of Material UI React data grid for the first time, and I am looking to add a unique background color to only the initial three rows. Each row should have a different color scheme that remains static, without any interactions trigge ...

Creating a loading spinner in a Vue component while using the POST method

After successfully creating a loader for fetching data using the GET method, I encountered challenges when attempting to do the same with POST method. Is there a reliable way to implement a loader during the POST data process? For GET method, I set the lo ...

Issue with background in list items

I am struggling with aligning the background of my vertical menu to the right and center from the top. Here is the code I have tried: ul.nav { margin:0; background-position:center; background-image: url(../images/nav_bg.gif);font-family: "Century Go ...

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

I have encountered this question multiple times on stackoverflow and through google search, but unfortunately none of the suggested solutions have worked for me. My issue involves a page that loads an HTML page with empty sections, which are then dynamica ...

Fixed header in a table designed using HTML and Bootstrap framework

Currently, I am facing a challenge with an HTML bootstrap table that contains over 15 columns. I have enabled overflow auto to enable both vertical and horizontal scrolling. However, I am having difficulty fixing the header part because the table width exc ...

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...

Guide to populating a select-option dropdown using CSS

I'm working on creating a dropdown menu in HTML that pulls the options from a CSS file. To accomplish this, I have assigned custom classes to each option and specified the option label in the CSS using the CUSTOM_CLASS::after{content: "";} r ...

Struggling with implementing the group by feature in AngularJS?

Currently, I am trying to group a select-window by 2 different object arrays - subcategories and rootcategories. Each subcategory has a relation id that links to the rootcategory's id. My goal is to have the dropdown window group the subcategories bas ...

The current context does not have a reference to TextBox

I am encountering an issue with my simple aspx page. Despite not using Master Content Page, I am seeing the following error: The name 'txtFirstName' does not exist in the current context Here is my Markup: <%@ Page Language="C#" %> &l ...

Align two tables horizontally in the center using HTML

Is there a way to center two tables side by side using CSS? I have been able to center a single table, but I am struggling to center two tables together. Can anyone provide a simple solution using CSS? Below are the codes I have used: @import url(ht ...

Unexpected behavior with async pipe - variable becomes undefined upon reassignment

In my development process, I have implemented 2 components. One is responsible for fetching data from an external service, while the other one displays this data. The constructor of the first component is structured as follows: constructor( private dev ...

Reveal Password Feature in Angular After User Click

I am working on an inventory page that includes a password field. My goal is to initially hide the password and display it as points (****) instead. I would like the password to be revealed either when clicked or through a pop-up. JS var retrieveCert ...

How to embed HTML code within PHP using a conditional variable

I've encountered an issue with a PHP code that sends emails containing HTML templates. The HTML template includes PHP variables such as Name and Email. <strong>Name: {name} </strong> As the email template is lengthy, I have included ...

Is there a way to use JavaScript to alter the existing URL?

Currently, I am utilizing a select tag to allow users to choose the number of 'rows' displayed on the table. <%=select_tag :per_page, options_for_select([10,20,50,100]....some more code...., onchange => "if (this.value) {windows.location=& ...

Having trouble selecting a dynamically changing div element in Selenium with Java using a click action

Every time I navigate to www.reddit.com and enter a query in the Search field, then press enter to go to the first valid link within a subreddit, sorting options are presented. By default, it is set to BEST but I wish to change it to TOP. My test class cod ...

Picture featuring a right-angled triangle on the right side

I have been experimenting with creating a complex image effect using CSS only, without any JavaScript. Despite several attempts, I haven't been able to achieve the desired outcome yet. https://i.sstatic.net/sUEaJ.jpg CSS .container{ width: 500p ...

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...