So... What is Bootstrap?

Bootstrap is a set of libraries that helps web developers make their websites responsive (and pretty). You can do a ton of things with Bootstrap, including neat adding CSS and JS components and functionality to your pages.

In this exploration session, we'll cover just the surface of some of the cool features in Bootstrap, and walk through adding Bootstrap to an example student portfolio page.

Getting Started

First, you need to link the bootstrap CSS file(s) to your HTML document. There are several ways to do this. In this session's demo, I have downloaded the bootstrap-3.3.7-dist.zip folder and added it to my local directory (where my HTML page for the student portfolio is located.

Once you have the boostrap zip folder, make sure to unzip it so that you can use it. Then you can link to the css in your HTML like so: 

          
            ...
            <head>
              <title>Foo's Portfolio Page!</title> 
              <link href="css/bootstrap.min.css" type="text/css" /&t; 
            </head>
            ...

Bootstrap Tools

There are various tools available in Bootstrap, including:

Demo!

Exercise 1: Separate into Containers and Panels

Exercise 2: Update UI

Exercise 3: Add a Glyphicon