Let’s Bootstrap

#04-Let’s Bootstrap,
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.
1. Go to Bootstrap's getting started section and grab the Jumbotron template at 0:35
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.
2. Edit the CSS path so that it is correct
index.html
change
link href="../../dist/css/bootstrap.min.css" rel="stylesheet"
to
link href="css/bootstrap.min.css" rel="stylesheet"
Link Notes
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.
3. Include our own custom.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.
Extra Lesson Notes
1. In this lesson we are linking to the CSS file via a relative path from the file we are currently in
(index.html). In a future lesson we'll discuss how to do absolute links like to http://www.google.com.
2. Comments in HTML documents (or any coding documents for that matter) are for the human eye
only. The code that indicates the beginning and the ending of a comment tells the browser just to
skip over that section and not worry about the code in there. Comments begin with "!--" and end
with "--". For example: !-- This is where you put the comment --
3. You’ve also seen CSS comments in this video. Check out the first line of your custom.css file where
it says: /* Move down content because we have a fixed... */. Comments in CSS start with
“/*” and end with “*/”.
Make sure to include the custom.css file lower in our "index.html" file. This way the browser reads
the custom.css file second after bootstrap's CSS file. Doing it this way makes sure that the CSS
rules we include in our "custom.css" file will take precedence over the same ones in bootstraps's "bootstrap.min.css" file. Don't worry if you don't understand this right now. You will see it in action
soon and it will soon become second-nature.
5. Bonus** You don’t need to know this, but is an interesting tidbit. A “min” file is a minimized version
of a file. So instead of linking to a .css file in this lesson we are linking to a .min.css file. Browsers
have to read the entire CSS file to interpret it. What a minimized version of a file does is take out all
the unnecessary spaces and line breaks so that the browser can read the file faster and thus your
site loads faster. Every extra line and space in a document makes it longer to for the browser to
interpret it. Minimized files eliminate these unnecessary wastes.