60 - 90 Minutes

Given the HTML from the Profile page you have previously built and styled, introduce Bootstrap 3 components by adding bootstrap classes. Here are some screenshots to give you something to aim at:

There is no need to add any of your own custom css files as all the necessary styling can be added using Bootstrap classes. You will need to make heavy use of the Bootstrap 3 documentation for CSS and Components.

Here is a list of the main Bootstrap features to use to succesfully style the page:

• The Grid System - Using columns and rows to create the overall layout. This will take a lot of time initially. The simpler the layout, the more responsive and pretty it is!
• Navbar - A complete Bootstrap navbar will be needed - use the example code from the documentation as a guide.
• Containers - Bootstrap often requires containers to work most effectively. Make sure you are using them correctly.
• Style - Once the layout is sorted, you can add extra styling tweaks to list items, images and blocks of text as you wish. Comb the docs and see what you can find.

1. By default Bootstrap makes itself a little bit responsive, but we can do better. Using only Bootstrap classes, make three distinct layouts for the index page depending on screen-size for mobile, tablet and desktop users.
2. Experiment with the following Bootstrap components:
   • Badges
   • Jumbotron
   • Thumbnails
   • Panels
   • Glyphicons
   • Inline code blocks
   • Etc.