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.
- Go to getbootstrap.com.
- Unzip the download, save it into your website folder.
- Download a template file from getbootstrap.com example page. OR download any example file below.
- Update the bootstrap links (links to mostly .css file) in the example, to match the folder names in your website folder.
I used the following learning resources:
First file, Grid system,
||the first page, download it to finish setting up the environment
bootstrap grid system = 12 columns, nestable, number
rows MUST be wrapped within a
.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
||multiple device support