I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
index.html is located in the same folder as the CSS folder.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Please for the love of God help me before I destroy my Macbook.
Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.
Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue.
Thanks a ton for the correct syntax.
I followed below steps to load or apply Boostrap css.
first check bootstrap available in node_modules?
If you don't see, Install bootstrap with below command
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules.
enter image description here
next open your project styles.css file and import below line.
#import '~bootstrap/dist/css/bootstrap.css';
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
I had the same problem and I solved it.
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
my file was saved in Unicode Encoding.
I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
you may also use notepad++ to change the encoding of a file.
good luck
I found this answer because it was the top google search yet I had this problem for a completely different reason.
For those who might have made the same mistake I have, remember to add
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
Sounds like this is just a simple directory issue.
You are saying you have the HTML file and the CSS file in the same folder right?
Then to load the file link it like this:
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else
If your css file is in a "css" folder then change the directory to:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
Related
So I've been creating a project on my localhost server for the first time using wamp (I've only coded html/css/js in repl.it before this) and for some reason, my css will not
stay on my page. When I try changing styles using my CSS file, it shows up when I refresh, but then very quickly disappears. The following pictures represent this (NOTE: I had to record and slow down the refresh just to see that it did change):
this appears right after refreshing
milliseconds later, the CSS no longer does anything
The following code is the link to the css in my html file (have some other script tags in there as well):
<html>
<head>
<title>Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap-icons.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="/PHP-Login-System/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
An image of directory tree (trying to link style.css with index.php):
directory tree
As far as I know, since my styling does show up for a brief moment, I don't think the error could be in my linking between the files, but I could be wrong. Any comments are appreciated.
Everything looks good to me, I think the problem is coming from wamp server, because like you said, your css styles is showing up and disappearing.
My advice is:
Uninstall wamp total , download a fresh copy from the internet.
Restart your computer, then reinstall the new copy you downloaded
Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>
I have finished editing the css file and saving it
but my css file doesn't work and doesn't change the display at all
and css files are also not loaded
but after I renamed the css file, everything work properly
css file loaded and the display changes
is there something wrong with the structure of my folder?
or is there something wrong with my coding?
my custom css is
<link rel="stylesheet" href="../style/index.css">
and this is my head tag
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="../style/index.css">
<link rel="stylesheet" href="../css/pace.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../css/fontawesome.css">
<title>Dashboard • Sistem Pakar</title>
</head>
my folder structure
act/
|---.....
|
assets/
|---.....
|
css/
|---.....
|
js/
|---.....
|
lib/
|---.....
|
style/
|---index.css
|
app/
|---index.php
If you are facing the issue that you are changing the css code but changes are not reflecting on browser. Its because browser cache your css and do not reload it from server (files). To manually reload it you need to:
Reload page by pressing ctrl+F5
Use some extension to clear cache of your browser
rename css file name so that browser can load new file
use some task runner like grunt etc to uglify and rename your css
you can try any of above method for you convenience
One trick that is useful to know about is the "disable cache" browser function.
As it sound, it disable caching while DevTools is open.
More information here : https://stackoverflow.com/a/7000899/4614064
Also, if you use Webpack or Gulp, you can use hashing to output a different filename so the browser has to reload it properly. In development, "disable cache" within the browser should be enough.
The web browser's or web server's cache is the reason for what is happening,
You can use a string after your css file like this and after every change, you can change the version and it will work.
<link rel="stylesheet" href="../style/index.css?ver=1.0.0">
Please note that the query string (the portion of the uri after ?) can be anything, as long as it is a valid query string and different each time you make a change.
How can I make this work in offline? This is in my index.html:
<link href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css' rel='stylesheet'>
Update:
There's a line in the css that contains http call to get the font css, do I
need to download it offline as well?
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");/*!
Download the minified CSS file from Bootstrap and store it in an external CSS folder - then call it into the page as an external CSS resource
for example:
<link rel="stylesheet" href="css/bootstrap.min.css">
Download Boostrap file and Save it.
https://v4-alpha.getbootstrap.com/getting-started/download/
basic syntax :
<link href='Path/yourNameFile.css' rel='stylesheet'>
Path is interpreted relative to the source of the Html file.
For Example : if Your bootstrap file is in Folder MyBootstrap and so This Folder and Html file are some Place,Your code must be like this :
<link href='MyBootstrap/YourNameFile.css' rel='stylesheet'>
If you want to use bootstrap files below in offline then just download these file on you PC.
Then remove text from https till just before the main file
Remove integrity & crossorigin attribute contents
Wolla! now you can see bootstrap files without CDN links.
The reference links & sheets wont work till you Remove integrity & crossorigin attribute contents.
Go ahead with this tip & tell me if it worked for you.
i.e
<link rel="stylesheet" href="bootstrap.min.css" >
<script src="jquery-3.4.1.slim.min.js" ></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js" ></script>
Place the bootstarp files in the same folder with html files as you are giving the relative path. If you have saved bootstrap files in a folder the give src="foldername/filename" path.
you have to download the css files and then use somethin like this
<link href="css/bootstrap.min.css" rel="stylesheet">
you can see more here: https://getbootstrap.com/getting-started/
Go to http://getbootstrap.com/ and download bootstrap put it in the same folder as your html and call it like this.
<link rel="stylesheet" href="css/bootstrap.css"/>
The best way to download usable bootstrap js and css files on your local folder and use it, after that automatically increase your page speed.
In addition to gavgrif's answer you will also need the file at this:
https://code.jquery.com/jquery-3.4.1.min.js
and this command to be pasted in section:
<script src="jquery-3.4.1.min.js"></script>
This is the link: https://footballcoder.github.io/YearOfCode/projects/about.html (source code: https://github.com/FootballCoder/YearOfCode)
If you see in my repo, I have a folder called projects and in there I have my about.html, and a folder called css. I have a file in the css subfolder that is called about.css, which is the css for about.html. I don't know why the css isn't being used. Is it the way the file is being linked or some other error. The link from the HTML file is in the tags.
change this
<link rel="stylesheet" type="text/css" href="/projects/css/about.css">
to this
<link rel="stylesheet" type="text/css" href="./css/about.css">
I hope this article can help you
You refer to the link as such:
<link rel="stylesheet" type="text/css" href="/projects/css/about.css" />
See if the following edit (removing '/projects/') fixes the problem.
<link rel="stylesheet" type="text/css" href="css/about.css" />
This should work because it is linking the path starting at the serving html, aka about.html, not at the root of your site. Just tested it with Dev Tools in Chrome, and it looks like it works (and is super cool!)
Side note: if your fonts from Google aren't loading, move the custom CSS below those links in the head. I'm not sure if they are or not since I'm not familiar with them, but that will work if that is also an issue.