How can I solve thymeleaf css not found error?
The bootstrap.min.css file is located in resources/templates/css/bootstrap.min.css.
The following sources were used to refer to this file.
<head>
<meta charset="UTF-8">
<link th:href="#{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</style>
</head>
The result rendered on the server is <link href="/css/bootstrap.min.css" rel="stylesheet">.
If you access the address
I get an error GET http://localhost:8080/css/bootstrap.min.css net::ERR_ABORTED 404.
How can I solve this problem?
Best Regards
Create a directory called static under resources/templates/ and move css directory into it. The css and js should be in a directory called static so that the framework recognises them. The path for the css file should look as follows:
resources/templates/static/css/bootstrap.min.css
Related
I've run my css through a validator (nothing is wrong)
My header looks as following (with irrelevant pieces removed)
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400&display=swap" rel="Stylesheet">
<title>Projekter</title>
<link rel="Stylesheet" href="Stylesheet.css">
</head>
and my stylesheet is named Stylesheet.css in the following folder hierachy
What could possibly be wrong here?
Please do tell me if I'm missing giving some relevant information.
The stylesheet call path is invalid.
The index.html file is in the HTML folder and Stylesheet.css is outside the HTML folder.
Please correct it as follows.
<link rel="stylesheet" href="../Stylesheet.css">
Chrome DevTools makes it easier to determine the cause.
I am trying to import a css file in the same directory as my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
I believe I am correct in using ./ to go through my directory. I have also tried using ../
However, in my dev tools in chrome, I am getting this error:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Any help would be appreciated. Thanks!
It is definitely the link that's the error.
You will need to check your file path, is this project just simply on your desktop? Is it a ASP.NET app?
Depending on where/what project it is, you should be safe to use .. to traverse up one folder
It really depends how your directory folder is structured, but if you have your HTML and CSS files in the same folder, you can just use <link rel="stylesheet" href="/styles.css"> (note that there's no dot), then your html file will look in the root folder of your project, also make sure the name styles.css is the same as your css file
Since you put the html file and the css file in the same folder, there is no need to use ./ or ../ because this step is written only if the css file is in another folder next to the html file
open-source public files work best. So instead, go to https://gist.github.com and sign up if you haven't already, name the file (with extension, e.g. style.css), and paste your CSS3 code, click 'create secret gist', and click raw. copy the link and that will be your external CSS file.
-Good luck!
I'm building a browser app in Angular 9 Typescript and am trying to implement the webdatarocks package so I can use pivot tables within a component of the app. I've installed webdatarocks and now have the following:
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<link href="/angular-app/node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="/angular-app/node_modules/webdatarocks/webdatarocks.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-wbr-pivot #pivot1 [toolbar]="true">
Webdatarocks will appear here
</app-wbr-pivot>
</body>
</html>
Note this is NOT the index.html file. That file is separate and contains the styles etc. for the entire app, I'm trying to use webdatarocks within only one component of the app, so the above code is in the html file of a component. (Not sure if this is recommended as I'm pretty new to this, but I don't see why it shouldn't work?). When trying to run this, the styles are not applied because of the following error:
Refused to apply style from 'http://localhost:4200/angular-app/node_modules/webdatarocks/webdatarocks.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Now I understand this likely doesn't work because it's unable to match any routes to the url, so it's being read as an error page in html rather than a css file. My question is how to actually fix this? Do I have to somehow add this url to the routing module? Is there not a way to simply point to the needed library in node_modules? I tried adding
"./node_modules/webdatarocks/webdatarocks.min.css"
"./node_modules/webdatarocks/webdatarocks.toolbar.min.js",
"./node_modules/webdatarocks/webdatarocks.js"
to the styles and scripts in the angular.json file and it still doesn't work.
Thank you and please let me know if I can clarify anything!
Okay, I learned all I had to do is remove everything within the head tag and just add:
#import "webdatarocks/webdatarocks.min.css";
to the styles.css file and Angular took care of the rest.
I created a style.css file. To include it in a .html file I tried :
<link rel="stylesheet" href="https://github.com/karinakozarova/HealthCalc/blob/master/style.css">
and
<base href="/style.css">
and
<href="/style.css">
None of them seem to work. Any ideas how to add CSS to my app via external file will be appreciated.
I think you may be missing a "type" attribute within that link. Try the markup below:
<link rel="stylesheet" type="text/css" href="https://github.com/karinakozarova/HealthCalc/blob/master/style.css">
The GitHub "blob" urls are webpages showing your file. Not the file itself. So you need to use the "raw" url or something like jsDelivr.
I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
index.html is located in the same folder as the CSS folder.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Please for the love of God help me before I destroy my Macbook.
Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.
Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue.
Thanks a ton for the correct syntax.
I followed below steps to load or apply Boostrap css.
first check bootstrap available in node_modules?
If you don't see, Install bootstrap with below command
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules.
enter image description here
next open your project styles.css file and import below line.
#import '~bootstrap/dist/css/bootstrap.css';
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
I had the same problem and I solved it.
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
my file was saved in Unicode Encoding.
I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
you may also use notepad++ to change the encoding of a file.
good luck
I found this answer because it was the top google search yet I had this problem for a completely different reason.
For those who might have made the same mistake I have, remember to add
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
Sounds like this is just a simple directory issue.
You are saying you have the HTML file and the CSS file in the same folder right?
Then to load the file link it like this:
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else
If your css file is in a "css" folder then change the directory to:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">