Richard's Bootstrap Page

Richard Ricardo's example page of creating responsive, mobile first webpages using Bootstrap (HTML, CSS and JS) framework.

Set up programming environment

Before you learn bootstrap framework, you MUST know html and css. If you have no html / css background, please learn them at this page.

  1. Go to getbootstrap.com.
  2. Click on Download Bootstrap twice "Compiled and minified CSS, JavaScript, and fonts..."
  3. Unzip the download, save it into your website folder.
  4. Download a template file from getbootstrap.com example page. OR download any example file below.
  5. Update the bootstrap links (links to mostly .css file) in the example, to match the folder names in your website folder.

Resources

I used the following learning resources:


First file, Grid system,

File Description
eg001.htm the first page, download it to finish setting up the environment

eg002.htm

eg002_style.css

bootstrap grid system = 12 columns, nestable, number

rows MUST be wrapped within a .container or .container-fluid respectively for fixed-width and full-width.

  • col-xs- (for phones): <=768 px
    • auto container, auto col width, horizontal at all times
  • col-sm- (for tablets): >=768 px,
    • 750 px container, ∼62 px col
  • col-md- (for desktops): >=992 px
    • 970 px container, ∼81 px col
  • col-lg- (for larger desktops): >=1200 px
    • 1170 px container, , ∼97 px col

 

  • gutter (padding) width = 30 px (15 px on each side of a column)
  • max .container content width = 1170 px
  • col must sum to 12
eg003.htm multiple device support
eg004.htm offsetting columns
eg005.htm .container-fluid