Bootstrap offers a handful of templates for you to jumpstart your site's creation process. We'll learn how to grab any of these templates we want.
After you click to open the Jumbotron template then right click on the page and select "view page source". Copy the entire HTML document and replace all the code in your "index.html" file currently with the copied code. Save the new index.html file.
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
We're creating the link so that it is relative to the current file. In other words, we're telling the browser how to get to (or the path to) the correct CSS document from the index.html file. So "css/bootstrap.min.css" is telling the browser to look for the "css" folder that is in the current folder - which is "first-site" - then go into it and find the "bootstrap.min.css" file.
View page source on the jumbotron template page if you don't still have it open. Then click on the jumbotron.css link. Copy all of the text in the document. Go to sublime and right click on the CSS folder. Click on New File, paste all the text in the document and save it as"custom.css" in the CSS folder. Then change the current "jumbotron.css" CSS link in our index.html file to our newly created "custom.css"file.
CONGRATS! You just created your first CSS file
"<!--"and end with
"-->". For example:
<!-- This is where you put the comment -->
/* Move down content because we have a fixed... */. Comments in CSS start with “/*” and end with “*/”.