Lesson Content

1. Bootstrap Typography

a. Headings and Display Headings

Headings: Utilize Bootstrap’s heading classes to control font size and weight.
- <h1> to <h6>: Standard HTML heading tags styled by Bootstrap.
Display Headings: .display-1 to .display-4 offer larger, more prominent headings.
Example:

html
Copy code
<h1>Standard Heading 1</h1>
<h2 class="display-4">Display Heading 4</h2>

b. Lead Text

Definition: .lead class for larger, slightly lighter text, ideal for introductory paragraphs.
Example:

html
Copy code
<p class="lead">This is a lead paragraph, providing an introductory statement.</p>

c. Text Alignment

Classes: .text-left, .text-center, .text-right, .text-justify
Example:

html
Copy code
<p class="text-center">This text is centered.</p>

d. Text Transformation

Classes: .text-uppercase, .text-lowercase, .text-capitalize
Example:

html
Copy code
<p class="text-uppercase">This text is uppercase.</p>

e. Font Weight and Style

Classes: .font-weight-bold, .font-italic, .font-weight-light, etc.
Example:

html
Copy code
<p class="font-weight-bold">This text is bold.</p>
<p class="font-italic">This text is italicized.</p>

2. Bootstrap Spacing Utilities

a. Margin and Padding

Syntax: {property}{sides}-{size}
- Property: m for margin, p for padding.
- Sides: t (top), b (bottom), l (left), r (right), x (left and right), y (top and bottom), blank (all sides).
- Size: 0, 1, 2, 3, 4, 5, auto.
Example:

html
Copy code
<div class="mt-3 mb-4 p-2">This div has top margin 3, bottom margin 4, and padding 2.</div>

b. Responsive Spacing

Classes: {property}{sides}-{breakpoint}-{size}
Example:

html
Copy code
<div class="mb-sm-0 mb-md-4">Bottom margin 0 on small screens, 4 on medium and up.</div>

c. Spacing Utilities for Flex Items

Classes: .ml-auto, .mr-auto for auto margins in flex layouts.
Example:

html
Copy code
<div class="d-flex">
  <div>Item 1</div>
  <div class="ml-auto">Item 2 aligned to the right</div>
</div>

3. Bootstrap Color Classes

a. Background Colors

Classes: .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-white
Example:

html
Copy code
<div class="bg-success text-white p-3">This div has a success background and white text.</div>

b. Text Colors

Classes: .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-white, .text-muted, .text-black-50, .text-white-50
Example:

html
Copy code
<p class="text-danger">This text is styled with a danger color.</p>

c. Link Colors

Classes: .text-primary, .text-success, etc., can be applied to <a> tags to change link colors.
Example:

html
Copy code
<a href="#" class="text-warning">This is a warning-colored link.</a>

4. Combining Typography, Spacing, and Colors

Practical Application: Create well-styled components by combining typography, spacing, and color classes.
Example:

html
Copy code
<div class="bg-info p-4">
  <h2 class="text-white">Informational Heading</h2>
  <p class="text-white lead">This is a lead paragraph with white text on an info background.</p>
</div>

Day 3: Bootstrap Typography, Spacing Utilities, and Color Classes