msum logo
Alex Fogarty - MSUM - Graphic Communications - Interactive Multimedia

HOME> GCOM368> Week 5 Details and Resources
Go to Details of Week 1 2 3 4 5 6 7 8 9

Week 5 - CSS Frameworks and Twitter Bootstrap


  • Class A Introduction to Bootstrap
  • Twitter Bootstrap is a responsive design productivity tool - and otherwise known as a CSS Framework, similar to how jQuery is a JavaScript framework. Bootstrap is very popular and used by many high profile companies. We’ll look at this framework in detail and our goals will be to understand responsive grid-based layouts, responsive navigation bars, and the built-in CSS styling that is a great feature of Bootrap.
  • Download class exercise file
  • Use class handout exercise instructions

  • Class B Continue with Bootstrap
  • Moving forward with Bootstrap, we’ll look at making a responsive navigation bar, as well as incorporating some JavaScript widgets into your web page, including an image carousel, dropdown menus, modal windows, and more.

Due Tuesday

  • Your responsive page is due today. Please submit your url to the dropbox on D2L.


  • Start the foundation (first 3 pages) of your Twitter Bootstrap Project, due Tuesday of Week 6. See below

Bootstrap Project

  • Start the first three pages of a website about a topic of your choosing using Bootstrap. You may use an existing site's content for text copy and imagery. The start of your site must include the following:
  • • Responsive navigation bar (you may include other navigation bars if you wish)
  • • Responsive (at least 2 breakpoints) Grid-based layout
  • • A few columns of text
  • • Glyphicons, buttons, and breadcrumb imagery
  • • Four elements of your choosing we haven't covered in class


  • Watch
  • Watch