Class 4 Notes for Web Publishing II

Learning Objectives:

You will be able to identify what a Responsive Design Framework is and why you would use one.

You will be able to identify what the difference between a regular and responsive design of a website.


Post: Responsive Design Website (using Bootstrap or W3.CSS) into your Webspace. Make sure that the site is linked off your homework page. The site needs to have 4 pages with graphics and links to an external site. Pay attention to the layout of the content. You can use a Brackets, Dreamweaver or another HTML editor

Post: A review of Bootstrap or W3.CSS underĀ Discussions > Responsive Design

Read: Responsive Design using CSS

Read: W3schools Bootstrap plus Templates or W3.CSS plus Templates

Watch: Bootstrap Video (if you are using Bootstrap)

Watch: W3.CSS Video (if you are using W3.CSS)

Watch: Responsive Design


Topics Covered:

Bootstrap 3 is mobile-first framework that is designed to be responsive to mobile devices.

Bootstrap Setup


Step 1. add the following <meta> tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width  sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

Step 2. add links to Bootstrap CSS and Javascript

The links can be to local files or the online files. Local files are better because you can customize and you don't have to rely on a remote site being available.

Step 3. Create Containers

Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from:

  1. The .container class provides a responsive fixed width container
  2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Note: Containers are not nestable (you cannot put a container inside another container).


Step 4. Create Rows

Bootstrap's grid system allows up to 12 columns across the row (page.)

You will be modifing Classes to create the desired layout and responsiveness using the Grid.


Grid Classes (The Bootstrap grid system has four classes)

  1. xs (for phones)
  2. sm (for tablets)
  3. md (for desktops)
  4. lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Placing Files Locally

css path for background




Templates, CSS3 and Generators


Dr. Jon Storslee
Phone: 602-787-6734

HTML Valid

Paradise Valley Community CollegeĀ 
18401 N. 32nd Street Phoenix, AZ 85032