Introduction to Twitter Bootstrap 3.0

In this session we will build a responsive webpage using the Twitter Bootstrap Framework. Let’s take a look at the finished project so we have something to work towards.

Project Demo Site

Getting Started

  1. Download the Project Resources (HTML5 Boilerplate / Bootstrap build)
  2. Extract the files to a folder in your root directory. In this example I’ll call that folder bootstrap.

What’s Inside?

Adding the Bootstrap Resources to your Page

  1. In your code editor browse to and open the index.html file.
  2. We need to view the source code of the document so click Code button in the top left of the document window. This is the html that you should use whenever you start a project using Bootstrap. Let’s look through this line by line so we can learn a bit more about how it works.

 

Now that we have all of the behind the scenes work out of the way let’s take a look at few of the elements we hope to implement in our design. Go to the next module… Using  Bootstrap Components.