Bootstrap

Multiple ways to install
- Links to CDN
- Install as node/yarn modules and link into the node_modules directory
Need <!doctype html> at the beginning.

Need to set viewport for correct mobile behavior:

 <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

Uses box-sizing: border-box by default
- Ensures that padding doesn’t affect computed width of an element.
Look at basicColumns.html
- Uses “CDN” configuration.
- container is basic container element.
- row contains items that belong in a logical row.
- 12 virtual columns
- Elements in a row fill the row, unless styled differently
- The sm, lg, etc. apply styling only for widths above the cutoff.
- Use col-* for widths below “small” (applies to all widths)
- Slowly make window narrower.
  - When the width falls below “large”, row “c” switches to groups of 3 (because 3x4 = 12)
  - When the width falls below “medium”, row “b” switches to groups of 1 (the default. No styling applies at this point.)
  - When the width falls below “small”, row “c” switches to groups of 2. (because 2*6 = 12)
- Notice the “choppy” movement when resizing the window.
  - Change container to container-fluid and notice how it smooths out.
Look at nestedColumns.html
- At the “medium” breakpoint, the outer groups switch from 4 to 2.
- At the “small” breakpoint, the inner groups switch from 3 to 1.
Look at equalWidthColumns.html
- Notice that the row will wrap when the words don’t fit anymore.
Other adjustments:
- offset adds blank space. (Previous to Bootstrap 4 this was col-offset)
- justify-content-start,justify-content-end, justify-content-center
- Add an offset to c7, then justify right.