I want to connect my .html file (containing Bootstrap's elements) with Bootstrap's .css file. I saw a lot of variants like:
<link href="resources/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
...but none of them was correct. In my case, I mean.
How it looks when I include in my code some of these line
How it looks when I include following line instead of these above:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
The conclusion are such that the app can see .css from the Internet but there is some problem with local file.
Here I sent .html file code:
http://wklej.org/id/3272762
If someone want to check folder structure, there is screenshot of my project in IntelliJ:
http://s6.ifotos.pl/img/idescreen_qrwrweq.jpg
I read on Stack there could be some problem with configuration but their solutions didn't seem appropriate considering fact that I use Spring Boot, not pure Spring without auto-config. Maybe there should be something added in application.properties? I saw also tips to put all .htmls with .css in one folder but... well, I don't think it is a good way.
Does someone know what I do wrong and what can I do to correct it to work properly?
EDIT.
If you are looking for solution, please read comments directly under first post
Try this above the other links:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Hope this works
As I see in file structure templates too is under the resources so the path should be href="../../static/css/bootstrap.min.css"
After receiving inputs of the Source HTML File and Bootstrap CSS file.
From the HTML file, ../ this will make it go one folder back which is resources, then go two folders forward static/css/ then there the bootstrap.min.css will be found!
HTML:
Propagander(main folder)/src/main/resources/templates
CSS:
Propagander/src/main/resources/static/css
The correct link should be.
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
Please let me know if this fixes your issue!
I saw an error in file path you added here:
<link href="resources/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
instead write:
href="../../resources/static/css/bootstrap.min.css"
EDIT:
href="../../static/css/bootstrap.min.css"
Related
I m trying to create a sidebar where I have a style.css for customize it. When I inspect my page, it seems it never loads and get 404 not found.
<head>
<h1>sidebar</h1>
<title>Responsive Sidebar Menu</title>
<link rel="stylesheet" type="text/css" href="style.css"></head>
My project is structured like in the following picture:
I can't figure out how to write the path so it can load properly.
Move your template folder right under resources:
src/main/resource/static/css (for CSS files);
src/main/resource/templates (for HTML templates).
Then correct the link tag as follows:
<link href="../static/css/style.css" th:href="#{/css/style.css}" rel="stylesheet" />
I'm having a problem trying to access my static CSS resources from lower directories. If I am in the main directory it detects everything but if I go to other lower directories, it adds the path from that folder and does not detect them.
Error
(In that path "server" is a directory that should not appear, since css is in the main directory)
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- Bootstrap CSS
============================================ -->
<link rel="stylesheet" href="/css/font-awesome.min.css">
I tried from putting ../, ./ searching the internet but I didn't find anything.
I am using Apache FreeMarker
Use .. to indicate the parent directory:
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
This will help you.
I have a project with such structure. CSS file is included like this
<link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
When I open html file on it's own from my computer, css loads. But when i load it from GET request on localhost, css file is not found.
It is indeed a path mistake.
When you are using two dots before slash sign - browser searches for the file in two folders upper from the current place of index.html
The solution depends on where your index file is located, I think that when you put all the thing to localhost your index.html is in the root folder, so there is no need in dots before the slash sign, simply make your path like this:
<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
Or without "/static/", if you have also moved "css" folder to the root
If you are still calling index from the templates folder - try using this code
<link rel="stylesheet" type="text/css" href="./static/css/style.css"/>
Your path is incorrect. From the image the correct path seems to be
<link rel="stylesheet" type="text/css" href="../static.css/style.css"/>
My file structure is as follows;
webapp
resources
foo.css
WEB-INF
home.jsp
mgr
ha.jsp
File home.jsp has the following:
<link rel="stylesheet" href="resources/foo.css
File ha.jsp has the following:
<link rel="stylesheet" href="../resources/foo.css
In Spring I have the following statement in my extension of WebMvcConfigurerAdapter:
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
Spring is happy and both JSP files render properly. But both JSP files cause errors with the Eclipse JSP editor because the editor cannot resolve the file locations. To fix the errors with the JSP editor I would have to code file home.jsp like
<link rel="stylesheet" href="../../resources/foo.css
And code ha.jsp like
<link rel="stylesheet" href="../../resources/foo.css
But this causes the web page to fail because Spring cannot resolve the files. So I tried coding in Spring the following:
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/","../../resources/");
This doesn't fix Spring but at least the JSP editor is happy. So how would I get out of the conflict and make both Spring and the JSP editor happy?
I read many possible explanations with this one being the best. Spring MVC mvc:resources location attribute
But I still could not get the problem resolved. Any help would be appreciated.
I'm building a dynamic web project using JSP and Servlets with Tomcat 7.0 in Eclipse. Everything works fine when I have the CSS-code inside the JSP-file, but when I'm moving it into a seperate file, I can't get the JSP-file to find the CSS-file. My file strucuture look like this:
MyProject
-src
-build
-lib
-WebContent
--MyJsp.jsp
--MyCss.css
--META-INF
--WEB-INF
This is what I've tried:
<link rel = "stylesheet" type ="text/css" href = "/MyCss.css"/>
<link rel = "stylesheet" type ="text/css" href = "MyCss.css"/>
<link rel = "stylesheet" type ="text/css" href = "/MyProject/WebContent/MyCss.css"/>
<link rel = "stylesheet" type ="text/css" href = "${pageContext.request.contextPath}/MyCss.css"/>
Literally nothing works. The JSP-pages doesn't find the CSS-file. (I'm not using a web.xml and the first that is loaded is a servlet, if that has someting to do with it).
I know that other threads about this issue exists, but none of the answers works for me.
Hank
Create a new folder under WebContent as css and add your css file
and then try the below code in jsp.
<link rel="stylesheet" href="css/yourfile.css" type="text/css" />
You can add firebug plugin in firefox and try to load the jsp file, which will help you in debugging,like whether the css file is loaded.Hope this helps.
There may be a lot of ideas floating around, but I'd suggest bisecting the problem until a solution arrives.
Open the page with the external CSS. Look at the page source (from your browser or just save the resulting HTML somewhere). How does the link look? (Hint: It should be something like <link rel="stylesheet" type="text/css" href="…"/>-
Open the CSS in the browser. Does the CSS load? If so, you've most likely made an error in the HTML-generating part of your HTML, but I think it is unlikely.
Look into your WAR file (perhaps with jar tf or rename it to .zip and look with some unzipper) – is the CSS included? Maybe it was discarded in your build process? Some builds reserve a /resources/ folder for stuff like extra CSS files.
If the file is there, look at the tomcat logs, perhaps you will find an error there.
Your css resource link may be wrong and you may need to provide a relative link from your JSP file. Try to link it as follows (note the use of the two periods to mention a one dir above your JSP file):
<link href="../MyCss.css" rel="stylesheet" type="text/css">
And as #dev already mentioned in his comment, ${pageContext.request.contextPath}/MyCss.css as a path should already do the trick.
The problem is that the file is not being served as a resource. You need to tell the server to expose a folder of resources to a certain path and move that file there. Since I'm not familiar with what you are using to setup your application (if you're using spring or something else), I can't give anymore insight on the problem.