Can't load CSS style sheet

Question

I'm new in HTML and I'm trying to use bootstrap in my project.

The problem is that I can't load bootstrap.min.css and none of the classes work. I did some searching and tried some ways but they didn't work for me

Here is my code :

<!DOCTYPE html>
%{--<!doctype html>--}%
<html>
 <head>
  <meta charset = "utf-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  %{--<link href="bootstrap.min.css" rel="stylesheet" media="screen">--}%
  
   <link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
 <title>TekDays - The Community is the Conference!</title>

 </head>
  <body>
   <div class="container">
 <table class="table table-bordered">
  <thead>
   <tr>
    <th>FirstName</th>
    <th>FirstName</th>
   </tr>
  </thead>
     <tr>
   <td>Mammad</td>
   <td>mammadii</td>
  </tr>
  <tr>
   <td>Akbar</td>
       <td>Akbarii</td>
  </tr>
 </table>
  </div>
 </body>
</html>

Using absolute path results in an error(use f12): Not allowed to load local resource: file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css

I read somewhere that it's only chrome's error and Edge or IE browsers don't have this problem, they don't but the results are the same, css classes are not applied.

I put the bootstrap.min.css under the same directory as my html page is and used <link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> instead of what is used in the code.

but this time I got error 404: not found This seems to be my problem with the path I've given...but I don't know what to do

Any idea what's wrong with it?

Check the extension of the `css` file. Maybe it is `bootstrap.min.css.txt`, and known file extensions are hidden in File Explorer — Mark Perera, Aug 23 '16 at 06:29
@Shahil GET http://localhost:8080/TekDays/bootstrap.min.css its in the console — Navid, Aug 23 '16 at 06:35
If you are using rails, Run asset pre compile that should work in rails — Shahil M, Aug 23 '16 at 06:41
@Shahil I'm using grails but I tried 2 other ways and none of them seem to work — Navid, Aug 23 '16 at 06:57
this might be useful for you http://stackoverflow.com/questions/18741877/resource-not-found-error-and-what-about-resources-plugin — Shahil M, Aug 23 '16 at 07:00
@MarkPerera Its in E:\TekDays\grails-app\views and I copied bootstrap.min.css there and used but it doesnt work — Navid, Aug 23 '16 at 07:03
Try copying both of them to a directory outside your project and check if it works — Mark Perera, Aug 23 '16 at 07:07
@Shahil http://stackoverflow.com/questions/18741877/resource-not-found-error-and-what-about-resources-plugin thanks a lot it worked !!! :-) — Navid, Aug 23 '16 at 07:15

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

The slash used here

<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">

would cause user browser to access the file from his filesystem.

Change the path

<link rel="stylesheet" href="E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">

UPDATED ANSWER : Resource not found Error and what about resources plugin

edited May 23 '17 at 12:00

Community

1
1

answered Aug 23 '16 at 06:47

Shahil M

3,836
4
25
44

Error Not allowed to load local resource: file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css – Navid Aug 23 '16 at 06:52

score -1 · Answer 2 · answered Aug 23 '16 at 06:31

<!DOCTYPE html>
<html>
 <head>
  <meta charset = "utf-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  <title>TekDays - The Community is the Conference!</title>

 </head>
  <body>
   <div class="container">
    <table class="table table-bordered">
     <thead>
      <tr>
       <th>FirstName</th>
       <th>FirstName</th>
      </tr>
     </thead>
     <tr>
      <td>Mammad</td>
      <td>mammadii</td>
     </tr>
     <tr>
      <td>Akbar</td>
       <td>Akbarii</td>
     </tr>
    </table>
  </div>
 </body>

It workes but im intrested to load it from local sources But thanks for your help — Navid, Aug 23 '16 at 06:49
open given link in your browser & save it from your browser to your folder where are your index.html file & call it like: — Omar, Aug 23 '16 at 07:02

score -1 · Answer 3 · answered Aug 23 '16 at 06:33

-1

its work check your css path

<!DOCTYPE html>

<html>
 <head>
  <meta charset = "utf-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
  
 
 <title>TekDays - The Community is the Conference!</title>

 </head>
  <body>
   <div class="container">
 <table class="table table-bordered">
  <thead>
   <tr>
    <th>FirstName</th>
    <th>FirstName</th>
   </tr>
  </thead>
     <tr>
   <td>Mammad</td>
   <td>mammadii</td>
  </tr>
  <tr>
   <td>Akbar</td>
       <td>Akbarii</td>
  </tr>
 </table>
  </div>
 </body>

answered Aug 23 '16 at 06:33

User

1,334
5
29
61

I think the OP is asking why his code is not working – Mark Perera Aug 23 '16 at 06:33
It workes thanks But do you know what was my problem with paths? – Navid Aug 23 '16 at 06:41
Try adding an additional slash in path this '\' may have problem use like E://TekDays//web-app//bootstrap-3.3.7-dist//css//bootstrap.min.css – User Aug 23 '16 at 06:42
Again the same error : Not allowed to load local resource: file:///E://TekDays//web-app//bootstrap-3.3.7-dist//css//bootstrap.min.css – Navid Aug 23 '16 at 06:46

score -1 · Answer 4 · answered Aug 23 '16 at 06:34

-1

href replace with src

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">

<link *src*="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">

answered Aug 23 '16 at 06:34

Imam

41
6

No. The `` element doesn't have a `src` attribute. – Quentin Jan 14 '20 at 11:45

Can't load CSS style sheet

4 Answers4