1. Responsive Grid Layout with Bootstrap
(modified from slideshow by Dr. Chengyu Sun
California State University, Los Angeles)

2. About Bootstrap https://getbootstrap.com/
Originally developer by Twitter
Most popular web UI library in the world
“Responsive, mobile-first”

3. Adding Bootstrap 4 to HTML
Require HTML 5, CSS, and JavaScript (some components)
Starter Template at
copy over the stylesheet, paste into head section
copy over javascript, put it at the end of body

4. Overview
Layout
Components: various pre-built UI components like buttons
Content: structures that contains content like tables
Utilities: convenient and/or responsive ways to control various element properties like border, spacing, and visibility
Icons: use external icon sets
components contains more than just buttons – check out what is available
utilities contains stuff that can be done in CSS, but bootstrap does it in a more systematic style.

5. Container .container .container-fluid Fixed-width
Responsive, i.e. max-width changes based on screen size
.container-fluid
full-width
before we can do layout, we must put stuff in container
-fixed width is most commonly used.
-trust bootstrap to figure out what the width is.

6. Grid
Bootstrap layout is based on a grid system with rows (.row) and columns (.col, .col-<n>, and .col-<device>-<n>)
Each row has 12 columns
Example: grid.html
Auto-width column
Total # of columns: 12, <12, >12
do this instead of using float left/right in CSS
12 is the default, divide it up as you see fit.
they should add up to 12! or else you’ll get funny results.

7. Make It Responsive …
5 device categories (grid breakpoints) based on screen width
Extra small
Small (sm)
Medium (md)
Large (lg)
Extra (large)
Phone (portrait)
Phone (landscape)
Tablet
col- corresponds to extra small,
col-sm is small, etc.
Desktop

8. Breakpoints

9. … Make It Response
col-12: 12-column wide when the device is extra small or above
col-12 col-md-4: 4-column wide when the device is medium or above; 12-column wide otherwise
col-12 col-md-4 colo-lg-3: ??

10. Utility: Display https://getbootstrap.com/docs/4.0/utilities/display/
.d-<value>, .d-<device>-<value>
Value could be none, inline, block, and so on
<span> is inline by default
<h>, <div>, <p> are block elements
<i> is inline…
This is something I don’t understand.

11. Show/Hide Elements Responsively
d-none: hide on extra small or above (i.e. always hide)
d-none d-md-block: display as a block element on medium or above; hide otherwise
d-none d-md-block d-lg-none: ?? (means display only on medium)