Lesson 21 - Bootstrap Typography
LEARN
Office Hours
- Half-way point -- Check your grades
- If you need help please attend office hours
- Connect in person of via zoom
- Check the Canvas page for details
- Wednesday Lab Session 2:30-3:20 in Kepner 0090
Reading for Today
- Read 3.5 Font and text properties
- Follow Reading Schedule
Today
- Styling with Bootstrap
- Bootstrap Typography
CSS Property Groups
- Text
- Color
- Spacing
- Borders
Bootstrap
The fast way to get great style
- Created by Twitter
- Reusable stylesheets for a standard look
- Incredible productivity
- Set styles with HTML attribute
Example Styling
```html
This has a green background with 5em of padding.
```
Similar effect with CSS.
```html
heading {
background-color: green;
padding: 5em;
}
```
### Add Bootstrap library to your home page
* Include the Bootsrap CSS library before your custom CSS
* This lets you override with your own styles
* Now remove some style from your stylesheet to make sure that the Bootstrap style prevails
### W3Schools website - Bootstrap Typography
### Headings and type
* Typeface
* text-monospace
* display-3
* blockquote
* Treatment
* font-weight-bold
* font-weight-normal
* font-italic
* Text transform
* text-lowercase
* text-uppercase
* text-capitalize
* text-truncate
* list-unstyled
* list-inline
### Colors
* text-primary
* text-secondary
* text-success
* text-info
* text-warning
* text-danger
* text-dark
* text-light
* text-muted
* bg-warning, bg-primary ...
### Text alignment
* text-left
* text-center
* text-right
* align-baseline, align-middle
### Spacing
* Margin
* mt-0, mt-5
* mb-0, mb-5
* m-0, m-5
* my-3, mx-4
* Padding
* pt-0, pt-5
* pb-0, pb-5
* p-0
* Centering
* mx-auto
### Floats & Fixed Position
* float-left
* float-right
* float-none
* clearfix
* fixed-top
* sticky-top
### Borders
* border border-primary
* w-25 - 25% of width
* h-50 - 50% of height
## BUILD
### W3Schools
* [W3Schools - Bootstrap](https://www.w3schools.com/bootstrap5/index.php)
### Validator
* [Validate the HTML](https://validator.w3.org/)
* [Validate the CSS](http://jigsaw.w3.org/css-validator/)
### Developer Tools
* Use Developer Tools in Browser to debug CSS
### Bootstrap Demo
* [Demo Code](https://github.com/Mark-Seaman/Mark-Seaman.github.io/tree/master/demo/week8)
* Study code so that you can reproduce these results
* [See Page Template on Server](https://Mark-Seaman.github.io/demo/week8/template.html)
* [See Typography Page on Server](https://Mark-Seaman.github.io/demo/week8/typography.html)