I have followed the tutorials on codeacademy and I am experimenting with getting to grips writing code for a website without tutorial guidance.
I'm not sure how to reference to Bootstrap other than the way that is given on the online tutorials which is using this:
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
Do you reference Bootstrap from your own computer after downloading the files?
Or do you reference an online source such as the one above?
Embedding Bootstrap can be done in two ways. You can either host a copy on your own server or use a copy from a CDN. Both ways have their advantages and disadvantages. It's up to you which way you prefer.
Local copy
<link rel="stylesheet" href="path/bootstrap.min.css"/>
CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
The Gettings started page will explain it in more detail.
BootstrapCDN.com
Hosts the Javascript, CSS, and Image files. Also has SSL support.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
This question is already answered here: Is there a hosted version of Twitter Bootstrap?
Danny, if you downloaded the files, you don't need to refer it. You can just call the file in the page.
or other solution is , you don't need to download files, you can refer Bootstrap CDN link from this page http://getbootstrap.com/getting-started/
cheers!
Related
I'm working on a HTML-CSS project.
I found a CSS file on the web but, there was not anyway to download the file.
I just know how to use a CSS file in my local project, not a file on the web.
How can I use this file on the web in my project?
please answer my question in a couple of code with a example URL.
For Example : http://example.com
Thanks.
You can include the link instead of a realtive path.
Here bootstrap e.g.:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
just ned to use this code:
<link rel="stylesheet" href="Your_stylesheet_Address">
I am running in a problem here. There are some bootstrap font awesome icons which are not working with the downloaded CSS but working with the same external CDN. Many are working but some are not working like fa-copyright, fa-credit-card-alt etc. For example:
Its working with
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
But not working when replace with
<link rel="stylesheet" href="css/font-awesome.min.css">
even though I copy the content of external CSS and replace with the contents of font-awesome.min.css in my css/ directory. Please help me.
try this:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
or
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
or
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
You also need to download the fonts themselves as well...It is a font, like any other...So, go to fontawesome website, follow the instructions and download css + fonts.
It not work, that just the css. You need the font files of font-awesome too, and put them in a folder called fonts. The font files are:
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
And you need the lastest versione too (4.7 i think) or you can't use some of the icons. Just go to their website and download it.
I came across the same problem. The version of FontAwesome I was using was outdated. I updated to use 4.7 and everything worked smoothly.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
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>
It looks like Mozilla's brick is going to be updated constantly.
Q: Is there a cdn for brick?
From official site of brick: To include Brick in your project, include your downloaded stylesheet and script files in your project's page like normal:
Also I researched and there is not anything about cdn
<link rel="stylesheet" type="text/css" href="brick-1.0.0.css"/>
<script type="text/javascript" src="brick-1.0.0.js"></script>
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">