HTML/CSS Boostrap demo

By | June 19, 2017

In-class exercise for modifying a Bootstrap page/theme:


Download Bootstrap:

When you develop your Boostrap website, use this pre-compiled version of Bootstrap. Add your html, images and any custom CSS to the top level of the folder.

Or, you can download the full version of boostrap (source), with demo files (and a lot more “bloat).


Noteworthy websites built with Boostrap:


Getting started with CSS/HTML:

W3C CSS syntax page

W3C CSS syntax page

What are the differences between CSS classes and IDs?

Use the Inspect Element tool to learn/modify a given web page’s structure: inspect element guide

Mac users are encouraged to edit code in TextWrangler

Mac and PC users can use Sublime Text.

Bootstrap Reference Materials:

Customize boostrap CSS the right way with child themes – explore the guide

Bootstrap components gallery – use this page to find boostrap “features” that you can integrate into your web page. Copy over HTML to call up each feature and customize as necessary.

Primer on Boostrap’s grid model (a key concept in responsive design)

Storing your Website

ProCom Staging/Development Guide

ProCom Web Hosting Guide