UNC BACS 200

Web Pages with HTML/CSS

Logo

Lesson 21 - Bootstrap Typography

LEARN

Office Hours

Reading for Today

Today

CSS Property Groups

Bootstrap

The fast way to get great style

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)