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?
4 answers
solution1
0 ACCPTED 2016-08-23 06:47:03
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
solution2
-1 2016-08-23 06:31:52
<!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>
solution3
-1 2016-08-23 06:33:01
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>
solution4
-1 2016-08-23 06:34:44
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.