7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Bootstrap Overview and Installation

In this lesson I’ll give you a short overview and show you how to install Bootstrap.


Related Links


2.1 Bootstrap Overview and Installation

Hey. Welcome to lesson number one. Now Bootstrap is a framework developed by Mark Odo and Jacob Thornton at Twitter. It will give you all the tools you need to build websites, web applications, or simple prototypes. It also comes with a variety of JavaScript powered controls, like modal windows, drop down menus, tabs and even a carousel control. These are all styled in advance. So, just by adding them to your page, you can have a working website in a very short time. And the styling doesn't stop here, Bootstrap provides styles for almost any web element you need, like buttons, forms, and tables. It even comes with an icon font, so it can easily add icons to your page, icons which are scalable, and can be modified in any way. The framework also provides a powerful 12-column responsive grid which will adapt itself to a variety of viewport sizes, from large desktops to phones. More about that in the next lesson. Now, in order to use these controls, you have you install bootstrap. And, no you don't install it like an application or a Windows program, instead you just have to download some files into your website's directory. So, first you need to go to their website, it's at getbootstrap.com, you click on this Download button. And you basically have two options, either download the whole package, which contains all the minified CSS, JavaScript fonts, and then you're gonna load those files into your website. Or you can use the CDN to link to those files directly, and you don't have to download anything, it's really up to you. If you don't wanna depend on an external resource, then it can go ahead and download the files. But, if you want to keep your site structure very clean, then you can use the CDN effect, this is the method that I prefer. Now, if you just want certain parts of Bootstrap, for example, just the grid. Or just the typography styling, you can customize your download by clicking on the Customize link. Here you can choose which components from the less file that you want, for example, typography, the grid system. And then you can choose which jQuery plugins you want. After that, you can go even further and you can customize the less variables. So for colors, typography settings, you can set different fonts, various styles for the components and as we can see on the list here on the right, it can customize virtually anything. So it can create something really unique that matches your needs. Now once you modify these and you are satisfied with your choice, you can scroll all the way down to the download section, we can hit Compile and Download. Yeah, this will last save a zip file to your, to your computer and also it's going to give you a custom ID. Now, this one you can use to go back to this customer version of Bootstrap any time you want. You can also share it with your colleagues for example. Now, I did mention less variables. But what if you're a Sass user? Well Bootstrap has you covered. You can go to the Getting started tab and Bootstrap will offer a Sass version. So you can start with that as well. Before I end this lesson I wanna show you how to install the CDN version. So basically I'm gonna copy these first two links, I'm gonna go back to Sublime. I have a simple HTML document here. And I'm going to paste these in the head. [BLANK_AUDIO] Okay? And then I'm going to copy this bit. [BLANK_AUDIO] And I'm going to paste it right here, just before the end of the body tag, and this will load the JavaScript file. Now if you're working locally, simply add an http in front of these addresses, but remember when deploy it to a live server, you can get rid of this. Now, the final thing to do here is to load jQuery, so I'm going to do a script with a source going to the latest jQuery version, which is 2.1 at the time of this recording. And that's it basically, once you do this, once you load these files, you're ready to start using the framework. Now, probably the coolest component inside Bootstrap is the grid system. That's coming up.

Back to the top