Html bootstrap link error - html

I cannot connect bootstrap's files from my index.html.as my code file belong ; my index.html file locates in /var/www/html as "localhost" . but when i start to localhost/bootstrap/index.html , i can access my website only without any CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bilsay Mavi
</title>
<link href=../css/bootstrap.min.css rel="stylesheet">
</head>
<body>
<h1>DENEME</h1>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Bilsay</a>
</div>
</nav>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
I tried <link href=localhost/bootstrap/css/bootstrap.min.css rel="stylesheet"> and <link href=/var/www/html/bootstrap/css/bootstrap.min.css rel="stylesheet">
but I can't access with CSS file .how can i solve this error?

Related

Angular 4 Local CSS File Gives 404 Error

I have the following in my head element of my index.html in my Angular 4 App:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Plant Simulator</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- link rel="stylesheet" href="styles.css" type="text/css" -->
<link rel="stylesheet" href="//demo.productionready.io/main.css">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
If I use the local path to the styles.css file, I can see from my browser console that it always throws a 404 error saying styles.css is not found as shown in the screenshot below:
Any ideas as to why is this? It works fine if I load the css from the CDN, but I want to have it rendered locally!

Styles not loading in firefox

I have a simple html page
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Firefox title</title>
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="test/css" href="static/music/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://127.0.0.1:8000/music/">Viberr</a>
</div>
</div>
</nav>
<h3>Here are all my albums:</h3>
<ul>
<li>Master of puppets - Metallica</li>
<li>Black album - Metallica</li>
</ul>
</body></html>
The problem is that firefox doesn't load css styles. It works well in chrome. I tried to run this page on two different pcs with same result.
Why firefox doesn't load styles?
You can check out the page here
There had been a few issues:
1) typo here text no text:
instead of :
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
it should:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Another typo:
use:
<link rel="stylesheet" type="text/css" href="static/music/style.css">
IMPORTANT type="text/css" is deprecated so you don't need it.
This is not correct either:
I hope that helped.
Take away the type attribute from both links, and it should now work.

Linking an external css file doesn't work

I'm trying to link my local bootstrap, and style file to my html file, but none of them works.
Here's my html file:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
My css files are located in a folder called css.
I got these files there:
The htdocs folder I have this:
JUST TRY THIS ---
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
These Codes are Wrong ---
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
These are Correct ---
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>

My code is not showing columns horizontally

My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/

Linking html file to a css file which is in a subdirectory doesn't work

I have a folder with my loginform.html and a CSS subdirectory with a simple CSS file:
<!DOCTYPE HTML>
<html>
<header>
<title>Login Forms</title>
<link href="CSS/LoginForm_CSS_1.css" rel="stylesheet">
</header>
<body>
</body>
</html>
The problem is that I cannot link them, and I cannot understand why, I tried:
<link href="CSS/LoginForm_CSS_1.css" rel="stylesheet">
and
<link href="/CSS/LoginForm_CSS_1.css" rel="stylesheet">
and
<link href="../CSS/LoginForm_CSS_1.css" rel="stylesheet">
but nothing works, when I put the LoginForm_CSS_1.css file in the same directory as the html file and use <link href="LoginForm_CSS_1.css" rel="stylesheet"> everything are ok. Any idea what I am doing wrong?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/LoginForm_CSS_1.css" rel="stylesheet">
</head>
<body>
</body>
</html>
head tag is for root, header tag should be in the body!