Lesson 24 - Grid System
LEARN
Office Hours
- If you need help please attend office hours
- MWF 1:30-2:30 by Zoom
- Zoom: https://unco.zoom.us/j/99180652183
- Email: mark.seaman@unco.edu
Reading for Today
- Read 4.1 HTML containers
- Follow Reading Schedule
Today
- Bootstrap Grid System
Using Bootstrap
- Link the CSS into the head element
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
Bootstrap Navs
- Use class "nav" on list
- Use class "nav-item" on each list item
- Use class "nav-link" on each link element
Containers
- Bootstrap Containers
- Use class "container"
- A container builds space on your page
```
My First Bootstrap Page
This is some text.
```
Container Fluid
- Allocate full display width
- Use class "container-fluid"
```
My First Bootstrap Page
This is some text.
```
Grid System
- Bootstrap Basic Grid
- Bootstrap Grid System
- Use class "row" to pack items horizontally
- Use class "col" to size the columns
```
.col
.col
.col
```
12-Column Layout
- Allocate width of columns to hold content
- Wraps at 12
- Example: 2, 6, 4
```
.col-2
.col-6
.col-4
```
Mixed sizing
- Some numbers with spacing
- Some without
- Extra space in allocate evenly
```
.col
.col-6
.col
```
Sizing Breakpoints
- sm, md, lg, xl
- Bootstrap Grid System
```
.col-md-3
.col-md-6
.col-md
```
BUILD
CSS Demo
- Demo Code
- Study code so that you can reproduce these results
- See Demo on Server