Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:53 minutes
Bootstrapport
  • Overview
  • Transcript

3.1 Setting Up Our Project With HTML5 Boilerplate and Bootstrap

In this lesson we’ll get our project started by grabbing a copy of the acclaimed HTML5 Boilerplate, installing Bootstrap via Bower, and then linking the two together.

Related Links

3.1 Setting Up Our Project With HTML5 Boilerplate and Bootstrap

Welcome back to Power Up Your Portfolio with Bootstrap. I'm your instructor, Corey Simmons. In the last lesson, we reviewed Bootstrap's grid system, and in this lesson, we'll get to work building our home page by grabbing a copy of HTML five Boiler Plate and Bootstrap itself, then tying the two together. So, navigate over to HTML5BoilerPlate.com and click on the big Download button. Open it up and go ahead and delete all of the markdown files like change log and such. We won't need these and we want to keep our project as clean as possible. Next, create a new project folder on your desktop called Bootstrap Portfolio Build. [BLANK_AUDIO]. Now let's drag the contents of that HTML5 boiler plate folder into our project folder. [BLANK_AUDIO]. Now let's go check out Bootstrap's documentation at www.getbootstrap.com. If we click on the getting started link at the top, it shows us we can install Bootstrap via Bower. Bower is simply a nice package manager for installing web packages exactly like Bootstrap. Package managers like this make it easy to update packages like Bootstrap. Let's go to Bower.io and read the installation instructions for it. It uses something called NPM to install. NPM is a package manager in its own right. And we can get it by installing node. So let's navigate over to nodejs.org and click the big install button. It's very, it's a very easy install, so just follow the defaults, and when you get to the end you should now be able to type NPM into your terminal or command prompt. And get some sort of feedback. Now let's go back to Bower.io and follow that command it gave us. MPM, install, dash G, Bower. Now you should be able to type Bower into your terminal and get some kind of feedback as well. Now that we have bower, cd to your desktop. Then to your project folder. Once inside your project folder type bower install bootstrap. It'll download a copy of the bootstrap repository including the distribution folder that bootstrap itself comes in. [BLANK_AUDIO]. Now we can simply add a style sheet link to our index.html's head tag, that references the location of bootstrap.men.css. Which is just the minified version of Bootstrap so it runs a bit faster. In order case, it's Bower underscore components forward slash Bootstrap forward slash dist forward slash css forward slash Bootstrap.min.css. To make sure it's working, let's make a simple button. So add button class equals button, button dash primary. And inside that will say hello bootstrap and close our button tag. So you're index.html within the body tags and open up our page in your favorite browser. Voila. Now we're using HTML 5 boiler plate and a package manager version of Bootstrap for our portfolio site. In our next lesson, we'll put the logo and navigation onto the page using Bootstrap's nav bar component.

Back to the top