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?

bootstrap/
├── index.html (Homepage)
├── favicon.ico (Toolbar Logo)
├── apple-touch-icon-precomposed.png (Mobile Icon)
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css (Adds Bootstrap CSS)
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css 
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css (Optional Theme Bootstrap CSS)
│ ├── bootstrap-theme.min.css.map
│ └── main.css (Contains All of your Custom Styles)
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js (Bootstrap Javascript)
│ └── scripts.js (Your Custom JavaScript)
├── fonts/
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── img/ 
  ├── hero-mars.jpg (Main Header Image)
  ├── reentry.jpg
  ├── selfie.jpg
  ├── rover.jpg
  └── jpl.jpg

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.