0

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

ToTomki
  • 67
  • 1
  • 5
  • Did you clear the browser's cache? – Alejandro Montilla Oct 17 '17 at 20:45
  • Yes, I did but unfortunately there's still something wrong – ToTomki Oct 17 '17 at 20:54
  • @ToTomki So relative to the HTML File where is the CSS file located? can you send the paths of the HTML and the CSS file? – Naren Murali Oct 17 '17 at 20:58
  • Sometimes the easiest thing to do is to create another html file, another css file, and link those two together (to discart a problem in the way you link your original files) – Alejandro Montilla Oct 17 '17 at 20:58
  • @NarenMurali HTML files path: Propagander(main folder)/src/main/resources/templates; .css file path: Propagander/src/main/resources/static/css – ToTomki Oct 17 '17 at 21:08
  • @ToTomki Does it help you? – Naren Murali Oct 17 '17 at 21:19
  • You can't develop anything without needing paths. So why not [learn it](https://en.wikipedia.org/wiki/Path_(computing))? Web addresses use Unix-like paths. You also have examples there. Always (re)search before asking on [so]. – tao Oct 17 '17 at 22:43
  • https://stackoverflow.com/questions/23733777/spring-boot-resourcelocations-not-adding-the-css-file-resulting-in-404?rq=1 I did a little mess but here can be found some interesting info about a problem if someone is looking for solution of case like mine ;) – ToTomki Oct 19 '17 at 15:30

4 Answers4

0

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 said, when I include link to online .css file there is everything fine but I want to create connection to .css file in my .css directory ('cause even if I pass the problem this way, there will be the same problem when I want to use other .css file or when I want to edit previous one) :( – ToTomki Oct 17 '17 at 20:41
0

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"
Sergio Baquero
  • 41
  • 8
0

As I see in file structure templates too is under the resources so the path should be href="../../static/css/bootstrap.min.css"

1011sophie
  • 237
  • 3
  • 9
0

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!

Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • Still doesn't work :(. Just in case, I added ".antMatchers("/resources/**").permitAll()" in config file but maybe Spring Security block .css file in some way? – ToTomki Oct 17 '17 at 21:27
  • @ToTomki Try opening the CSS link directly using the server URL, like `localhost:8888/src/main/resources/static/css/bootstrap.min.css`, please check the path also, if the path is correct and it says permission denied or something, then permissions is the issue I guess! – Naren Murali Oct 17 '17 at 21:30
  • The result is whitelabel error page so probably the problem is the connection between .html and .css files – ToTomki Oct 17 '17 at 21:37
  • @ToTomki Place the CSS file in the same path as the template, reference it like ``, if this doesn't work, please confirm the source HTML file is actually the file path you are saying! – Naren Murali Oct 17 '17 at 21:39
  • It's strange but the .html file stil doesn't see the .css file even if both of them are in the same folder. – ToTomki Oct 17 '17 at 21:52
  • Yes, it was. Unfortunately, I forgotten to come here and to post the solution. I don't remember the solution know but I know you gave me some tip what to look for. And thank you very much! – ToTomki Apr 21 '18 at 20:34