Tuesdays Starting October 22nd
20 Washington Place

Instructor: Bruce Donald Campbell

Faculty, Continuing Education - RISD
Providence, RI

Director, Watersheds Project
Providence, RI


Prerequisites: CSS


If you want your site to look and behave great on both mobile and desktop you'll need a responsive design. Bootstrap's industry-standard responsive framework comes with pre-built CSS classes and media queries that make building your mobile-ready site faster and easier than coding from scratch. In addition, Bootstrap has a number of available components like buttons, carousels, modals and more that are common user interface elements used throughout today's Web. You'll learn how to implement these common interface elements, and modify them to apply your own customized designs. You should be comfortable with HTML and CSS in order to get the most out of this course.


Class participation - 20%
Homework assignment - 20%
Final project - 60%



There are no required books associated with this class — instead, we will use the wide resource library available from Web sites promoting and explaining Bootstrap use.

Course Handouts and On-line Readings as identified below and in class.


Bootstrap Home Page
Bootstrap Examples Page
W3 Schools Bootstrap Page
Bootstrap CSS Full Link
Material Design for Bootstrap
MDB Card Examples
Bootstrap Themes
Font Awesome Icons
The Bootstrap Blog


welcome to bootstrap

Goal: To understand responsive design, mobile device layouts, and content management systems through the use of Bootstrap

In Class:

  • CSS Features for Responsive Design
  • Mobile Layouts
  • Content Management System Integration
  • Downloading Bootstrap
  • Work with a week one example.


  • Consider what Bootstrap is suggesting:

    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • Is this a reasonable claim? What exactly do you want out of a service that makes such claims?


using bootstrap for websites

Goal: To implement bootstrap in a first complete project and focus on testing.

In Class:

  • Mastering the Bootstrap Grid System:
  • We start with a grid system for the smallest devices (see the result of our classwork).
  • Notice how the container class works to provide reasonable margins for the page.
  • Notice how we can nest rows inside of rows in the page.
  • Notice how we hide columns within the page (example: hidden-md-down (or up)).
  • We can apply styles to any or all of the Bootstrap grid's classes (and you can add your own).
  • We can use a pattern of .pull-XX-direction (where XX is the size from grid and direction is left, right, or none) to move content around
  • Add margin or padding using classes with .property-sides-size (m or p for property; t,r,b,l, x, y, a for sides; 0, #, auto for size - in rems)
  • Consider the rem unit of measure
  • Work with a week two example.
  • Generate your own learning examples from the work we did in class.


integrating and aligning gui elements

Goal: To understand how bootstrap provides styling features for popular GUI components.

In Class:

  • Do Homework assignment 1 on responsive GUI design.


designing basic cards

Goal: Understand Bootstrap Cards and recognize that the language for defining cards is one of the most rich in the Bootstrap framework.

In class:

  • Understand the data-toggle (modal, collapse, dropdown, tab) and data-target attributes of HTML5 that Bootstrap uses.
  • Deconstruct card design into descriptive content types like text, lists, block quotes, and links.
  • Manage headers and footers for use in multiple cards
  • Use image overlays for attractive card designs
  • integrate other content types in card components
  • Work with a week four example.
        Cards have rich content classes:

		Use a container with .card class

		Then subcomponents:

		Multiple image-related classes:

		Special sections for cards:

		List components:

		Card styles:
  • Work on your mid-class homework and final bootstrap project.


gallery genre features

Goal: To feel comfortable integrating interaction features provided by the Bootstrap Framework.

In class:

  • Review popular gallery sites for attractiveness and user experience
  • Work with a week five examples.
  • Implement the carousel and other Bootstrap specific gallery support services
  • Work on informative tables design
  • Work on your final bootstrap project.


managing changes to Bootstrap

Goal: To feel comfortable modifying Bootstrap Framework features for your own tastes.

In class:

  • Examples of modifying the base Bootstrap Framework for presentation features.
  • Inventory of all popular Bootstrap features available within the framework.
  • Take a look at student projects.
  • Work on your class project.

Turn in your project by 11:59pm on Dec 11th.