Bootstrap styles do not load

Asked

Viewed 3,026 times

1

I have a website and I’m using Bootstrap but for some reason when I go to index.php everything works as it should be, but if it goes to index.php/ (with the bar at the end) the HTML code loads but the rest does not, no css or js or anything.

sem barra

com barra

javascript html5 css3 twitter-bootstrap

  • try adding the full address by calling js or css. Example: <link href="http://192.168.2.106/PAP/css/style.css" ... />

  • You can solve this with URL rewrite rules on your HTTP server (Apache or Nginx or whatever you’re using).

2 answers

3


You must be using a relative address for your CSS file:

<link rel="stylesheet" type="text/css" href="arquivo.css">

When you do this, the browser will search the file at different addresses, depending on whether the bar is present or not:

  • If the address bar contains http://192.168.2.106/PAP/index.php, the file searched will be http://192.168.2.106/PAP/arquivo.css

  • If the address bar contains http://192.168.2.106/PAP/index.php/, the file searched will be http://192.168.2.106/PAP/index.php/arquivo.css

To avoid this problem, you should use addresses that are not relative:

Placing a bar at the beginning of the path to CSS, it is possible to indicate that it relates to the root:

    <link rel="stylesheet" type="text/css" href="/PAP/arquivo.css">

This way, the search address will always be http://192.168.2.106/PAP/arquivo.css, observing the host used in the address bar.

Another solution would be to put the full CSS address. It is a good option in case the CSS is on an external server... otherwise you will have difficulty while developing the program.

If you are going to do this, consider putting the address without specifying the protocol in order to use the same protocol that is written in the address bar.

<link rel="stylesheet" type="text/css" href="//meuservidor.com/PAP/arquivo.css">

  • Thanks for the tip, very enlightening

  • I found this answer better than before, because I got the same result without having to call php to every css and js file I included, thanks again for the solution and explanation

1

I had the same problem when creating SEF Urls and it was solved by putting the server address in all the css and js requests, as Leonardo said in his comment. try to use :

<link href="http://<?php echo $_SERVER['SERVER_NAME'];?>/PAP/css/estilo.css" ... />

So you won’t have trouble with the code when you go up to production.

I hope I’ve helped

  • I don’t know, I saw on the console the message "Resource Interpreted as Stylesheet but transferred with MIME type text/html" and the solution I found says to modify the . htaccess and add "Addtype text/css . css" to the file

  • now I only have to learn how to create that file, since there is none at the root of the site

  • When you add the bar at the end of the address the server treats it as a directory, and looks for a nonexistent style sheet, so it resolves by adding the full address.

  • Worked with $_SERVER['SERVER_NAME'] :D

  • By the way, I tried to add . htaccess with the code but came up empty....

Browser other questions tagged javascript html5 css3 twitter-bootstrap

You are not signed in. Login or sign up in order to post.