Responsive Pages using Bootstrap

Due: Monday Feb 13, 2017 - 11:55pm

Overview

In this assignment you will build a new single page that makes use of significant elements of the Boostrap Framework to create a responsive page. These elements include the Jumbotron, images framed to appear as circles, fully responsive navigation, and elements that dissapear on small devices displays. There is a lot going on in this assignment and you are being given a head start in the form of a partial solution below. You are also given screenshots showing behavior at differen display widths. You may change text content, titles, images, etc. In generaly, please be creative within the bounds of the requirements below.

Requirements

1. Use required and meta tags.
2. You need to use the bootstrap components to design your web page.
3. Use Bootstrap's CSS and JavaScript CDN links.
4. Use the Jumbotron component of Bootstrap for your web page heading.
5. Create the navigation bar including hamburger reduction.
6. You need to create the three column design using size md and lg.
• First column will have links.
• Second column will have text data.
• hird column will have your Image.
7. Your image should appear as a circle (see example)
8. Your image should hide if screen is sm or xs.
9. Create 2 dropdown menu under navigation bar, which will allow you to choose link to navigate different web page.
10. Use Bootstrap List group or Bootstrap Panel to create your first column.

Head Start

To get you moving more quickly on this assignment, below is a link to a zip file including a partial solution to this assignment. In particular, the header material is complete and sufficient. In addition, the most prominent structural compoenent of the body are present; you need to fill in missing content.

• assignment03_partial.html.zip
• head_start.zip Includes additional files you may find useful.

Also, at the bottom of this page are three screen shots of a filled out example displayed at different widths.

Addendum

None at this time

ScreenShots

Here are screen shots. Notice the developer tools inspector is being used to show pixel widths for each screen shot.