Bootstrap

At a high level: Lots of CSS styling (with a little JS help)
- W3Schoosl tutorial
- Helpful book from O’Reilley: Mastering Bootstrap 4 (2nd ed) Jakobus and Marah (https://learning.oreilly.com/library/view/mastering-bootstrap-4/9781788834902/)
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.
- Bootstrap defines categories of screen size
  - xs < 576px
  - sm >= 576px
  - md >= 768px
  - lg >=992px
  - xl >= 1200px
  - xxl >= 1400px
- The sm, lg, etc. apply styling only for widths above the cutoff.
  - d-none sets display: none for all sizes
  - d-lg-block sets block styling for lg sizes and above
  - d-xl-none sets display: none for xl sizes and above
  - Styling for larger breakpoints overrides styling for smaller.
- Withing a row, use col- class to specify the fraction of the row the item should take up.
  - Use col-* for widths below “small” (applies to all widths)
  - Default is for element to consume entire row.
- 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.
  - Change to container-lg and notice the switch to fluid at the lg level.
Look at nestedColumns.html
- At the “medium” breakpoint, the outer groups switch from 4 to 2.
  - Outer groups are never fewer than 2 (from the col-6)
- 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.
- 3rd example sets oh class which will hide the overflow.
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.
- (https://getbootstrap.com/docs/5.0/layout/grid/)

Other Features

Reboot: Changes to default styles that many people find useful:
- (https://getbootstrap.com/docs/5.0/content/reboot/)