Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Downloading Bootstrap 4

Hello and welcome back to customizing Bootstrap components. Throughout this course, we're gonna be using the Bootstrap 4 Alpha release for our projects. Now, most of the markup and most of the code that we use is going to be applicable to Bootstrap 3 as well, but in the interest of staying up to date with the latest and greatest, we are gonna be using the Bootstrap 4 Alpha. So if you go to the main Bootstrap website at getbootstrap.com, you'll notice there's a header up at the top, right now, that says Bootstrap 4 is coming. So we can click on that and get more information. Now, this is just a blog here. But if you go to this post on the 19th of August and scroll down a little bit, you'll see a link to the docs. So we'll scroll down a little bit further, here we went too far. Yeah, here we go. This right here, it's a link that says, head to the v4 alpha docs. So I'm gonna click on that and you can see the URL for it here, I'm also going to include this URL in the course notes. So this is the documentation for the alpha version of Bootstrap 4, and it also contains the download. So you can click on this Download Bootstrap link. It will take you to a getting started page where you can look through and see different ways to download it. But all I want to do here is grab the source files, so I'm gonna click on Download source. And that'll give us a zip file, and we'll take a look at that zip file and I'm just gonna double click on it to unzip it, and inside the main folder you'll see a folder called dist. This contains all of the files that we actually need. We're not gonna worry about the rest of these files we just need what's inside the dist folder, we need the CSS, and the JavaScript here. So I'm just gonna grab both of those folders, copy them, and I'm gonna paste them where we need them to be in our project files folder. So I'm gonna drag over my project files folder here. And right now I've got a clean slate this project files folder will be included with your course, and then once you download that you should be able to see all the files that we've worked with throughout this course. So I'm gonna start by creating a new folder here, and I'm just gonna call it site01. And in the site01 folder, we'll double-click on that, I'm going to paste the two folders we just copied, which contains our CSS and our JavaScript. Then I'm gonna jump back to our project files folder. I'm gonna grab the site01 folder and I'm gonna drag it down to my brackets icon brackets is my text editor of choice for many things, and I like it because it allows you to open up an entire folder at once, and we can add files to a folder over here to the side. And as you can see there is an update available. I'm gonna skip that for now. And here we have our site01 folder, we can see our CSS folder, and our JavaScript folder. And we can also right click here to create a new file. So I'm gonna create one called index.html and then we can get started. So obviously you don't have to use brackets it is free, you can search for it online. I really like it. But once we got it open, we can get started creating our basic HTML document, and then we just need to link to our files. So, I'm gonna start underneath our title by creating a script tag. Actually let's do our CSS first. Let's do a link tag. And we're gonna set our href equal to and we're just gonna navigate to our CSS folder. And I'm gonna grab bootstrap.min.css, and we'll go ahead and put rel="stylesheet". There we go. So then I'm gonna create a script tag, and we actually need a couple of things for our script. Not only do we need Bootstrap but we also need jQuery. So I'm gonna open up a new tab here. I'm gonna do a search for jquery cdn, so that we can easily link to jQuery and here's the code that jQuery.com website and we can hover over it. Let's just go to the jQuery 2.x link, you'll see that anything in IE less than version 9 is not supported. And let's go ahead and be safe. Let's go to 1.x, our latest one here is 1.12.3. And there's an uncompressed and a minified version. I want the minified version. Now when we hover are over that we can see the link for it down in the bottom left, and one thing we can just do is right click and copy that link address. So then we'll jump back into Brackets, or whatever your editor is, and here, we're gonna set our source equal to, and I'm just gonna paste that link that we just copied. So, now we have a jQuery code, and we need to put that first, because our Bootstrap code requires the jQuery code. So now we're gonna have another script tag. But this time we're gonna set our source equal to, we'll jump down to the js folder, and I'm gonna grab bootstrap.min.js. And we'll close that out. So now we have all that we need to get started using the Bootstrap 4 Alpha. So I'm gonna save that. And now we can use this site01 folder as kind of our starting point for our projects as we start building out some of these customized components that we're gonna be creating. So thank you for watching, and we'll get started in the next lesson.

Back to the top