Hi everybody. If I've done a good job up to this point, you're really excited to use Bootstrap and you're kind of annoyed with me that I haven't shown you how to do it yet. So let's get started with using Bootstrap. The first thing that you need to do is you need to get access to the styling and JavaScript code that Bootstrap provides. There are three options for doing this. We can download a copy, we can use an absolute reference to link to the code. And we can also talk about how we can link to the code from our CodePen account. If you want to save your own copy of bootstrap, you can go to the website, getbootstrap.com, and there's a quick an easy get started link for downloading. It really, really important that you use the official site when you're grabbing your bootstrap code. A number of times, students have gone on, searched the internet, and download older versions of bootstrap and unfortunately, they are completely incompatible. And it takes a really hard time to figure out where they went wrong. So download from the official site. When you download, you also have the option of customizing the values before you download. This will save you time, if you know there are certain break points, colors, or other styles that you want to happen, and you don't want to go around and overwrite them later. Let me show you. When you go to the website, you can see that it lets you customize different options. So for instance, you can put in and you can say how I want to use tables, forms, buttons. You can down further and say you know what I don't think I'm really going to use any jQuery, so I'm going to uncheck these boxes, and that's going to let me download smaller amounts of code. You can go in and you can change the different colors to what you want them to be. It's a kind of nice way to get started if you already know exactly what you want to do. For most of us though we're going to download the basic code. The most important thing is that once you've downloaded that code, make sure you know where you saved your files, this is so important you don't want to spend time later trying to remember exactly where you saved it, change your links, move things around It's very important to be organized. Another option, though, if you don't want that work of downloading the code, or you want to make sure that you always have the most up to date copy, is to use a CDN, or content delivery network. Basically, CDN provides a way for you to use an absolute reference or a link to get the bootstrap code. Down here, again, we can go to the link getbootstrap.com/getting-started and they will give you the code that you need to include. I've got it right here. You will need to copy and paste this code and this code into the header of your document. It's really important to make sure you have the full thing because it allows bootstrap to know that you're connecting through the CDN and you're not just spamming them or trying to download other things. So by including these, you no longer have to keep a copy yourself. And that's really handy if you plan on having many different versions of your site. And you don't want to have lots of different copies of the bootstrap code. I'm adding a third option to this lecture because so many of us use CodePen. I wanted to show you how you can link the bootstrap from CodePen, if you don't want to remember those extra links. You start off by going to the settings, then the CSS, and add external CSS. You've got an example here for us, where I am starting fresh. I don't want to go in and put in those links, because I really want to keep this code clean. I really want to keep it to just HTML. So if you follow along, I'm going to go here to settings. I need to click here on the CSS. And, if you go down here to add external add, right underneath here, there's a little something called, quick add. Alright? And, if you click on quick add. You can see that bootstrap is one of the options. So, once you have that put in there. As long as it's in here. It now knows this is how you can add the external CSS. Now you may remember that I said, you're going to connect to the CSS and JavaScript files. So once you added the CSS you want to click on JavaScript. Right here. Quick add, and add bootstrap as well. Once we've done this, our site is now ready to use any of the bootstrap classes or any of the bootstrap JavaScript that we may need to use. So it's very common when you're first getting started with bootstrap, or even once you're a bit of a pro, to start with a template that's already been created. If you go to bootstrap and you're following along in the examples they have some example code there for you. On CodePen I've included another example code, that's just modified a little bit from the getbootstrap.com and I've put it in my Code Academy Responsive design Bootstrap Template. In my template, I did not go in and link to bootstrap using the settings. Instead, I wanted to show you this code both with and without the links because that way if you write it up yourself you can still have it. So here's the link to the bootstrap, CSS, and JavaScript, and down here is my actual code, all right? It doesn't look like there's that much going on, I mean, because there isn't. All I've done is put in a hello world, how are you? However, if you've been coding for long enough, your eye might notice that, the Hello, world and the How are you, look a little bit different from the default values. Instead it's using that bootstrap font. One way is for me to delete the link to the style sheet. I'll do that right here. And now you can see that the font has changed a little bit. This is actually really important and let's talk about why. So on a simple file, like I said, one of the things you can do to test to see if bootstrap is actually working or actually doing anything it to comment out that link to the CSS. Right away you should at least see some sort of very faint change in the font. Another thing you can do, and I really encourage you to do, is to use inspect element. This method is preferred, particularly as you start to add your own styles. Don't forget, bootstrap is just one of the tools for styling your page. The expectation is that you will still write your own style sheet as well. With inspect element, we can go in, look at the different parts of the page and figure out exactly which styles are being applied and which ones aren't. I'll make sure when we go through our code within the examples that I often stop and use inspect element to show you what I'm talking about. So, as we finish up, this very quick example, I hope that you go in. I hope you grab that CodePen example and you try writing one of your own. If it's not working, don't forget that you need to include to link that code in some way. You can use inspect element to see If there's any styles being applied. You need to make sure that you always include the JavaScript at the bottom. In fact, I'm not sure I even put enough emphasis on that, so let me show it to you again, just so you know what I'm talking about. I'm back at our original template code. And I'll put back in the style sheet. When you scroll down, you can see that after I have hello world, I have the template code that includes a link to some bootstrap code. Even though you may not be using java script. Even though you may not know how java script works for some of you. It's important to know that bootstrap may be using the JavaScript in order to get things to work a certain way. This down here is a number one problem for getting to link to the JavaScript. So when you use, start writing your own code I highly recommend that you use my template to get started every single time. It's also important to remember that you can customize those bootstrap defaults. I talk about that a lot right now. I don't think you're going to do it, I don't think you should do it, but it's something that I want you to know is possible once you really get the hang of what's going on. Finally, you can also always go in and overwrite those bootstrap defaults. Remember how I said the font looks a little bit different than what you may have been expecting? That's okay, you can go in and change it in your own style sheet. That's something I hope that you'll explore over this next week as you go in and you write code, and you practice, and you write some code again. Thanks.
