Lesson 9: Typography & Custom Fonts in Bootstrap

📌 Objective: Learn how to style text, fonts, and typography in Bootstrap using built-in classes and custom fonts.

---

🔹 1. Introduction to Bootstrap Typography

Typography is one of the most important aspects of web design. Bootstrap provides predefined typography classes to style text, headings, paragraphs, lists, and alignment.

💡 Why Use Bootstrap Typography?
✔️ Predefined styling – No need for custom CSS.
✔️ Responsive typography – Adjusts text size based on screen width.
✔️ Easily customizable – Change fonts, sizes, and colors with utility classes.

---

🔹 2. Bootstrap Heading & Paragraph Styles

Bootstrap includes default heading styles (h1 to h6) and paragraph styles.

✅ Example: Headings & Paragraphs

🔹 What happens?

• display-* classes make headings larger than normal.
• .lead makes paragraphs stand out.
• .text-muted dims text for less emphasis.

---

🔹 3. Text Alignment & Transformation

You can align and transform text using Bootstrap’s utility classes.

Class	Effect
.text-start	Aligns text left
.text-center	Aligns text center
.text-end	Aligns text right
.text-uppercase	Converts text to uppercase
.text-lowercase	Converts text to lowercase
.text-capitalize	Capitalizes first letter of each word

✅ Example: Text Alignment & Transformation

🔹 What happens?

• First paragraph centers and converts text to uppercase.
• Second paragraph aligns right and converts text to lowercase.

---

🔹 4. Controlling Font Weight & Style

Bootstrap provides classes for bold, italic, and different font weights.

Class	Effect
.fw-bold	Bold text
.fw-semibold	Semi-bold text
.fw-normal	Normal font weight
.fw-light	Light text
.fst-italic	Italic text
.fst-normal	Normal (non-italic) text

✅ Example: Font Weight & Style

🔹 What happens?

• The first paragraph becomes bold.
• The second paragraph is lightweight and italic.

---

🔹 5. Using Bootstrap’s Built-in Fonts

1️⃣ Default Font Stack

Bootstrap uses system fonts by default for better performance:

🔹 This ensures:
✔️ Faster loading times.
✔️ Improved cross-browser compatibility.

---

2️⃣ Customizing Fonts with Google Fonts

You can change the default Bootstrap font by using Google Fonts.

✅ Example: Using Google Fonts in Bootstrap

🔹 What happens?

• The paragraph text uses Poppins instead of Bootstrap’s default font.

---

🔹 6. Bootstrap Text Colors & Backgrounds

Bootstrap includes utility classes for text colors and backgrounds.

1️⃣ Changing Text Color

Class	Effect
.text-primary	Blue text
.text-secondary	Gray text
.text-success	Green text
.text-danger	Red text
.text-warning	Yellow text
.text-info	Cyan text
.text-light	Light text
.text-dark	Dark text

✅ Example: Changing Text Colors

🔹 What happens?

• First text turns blue.
• Second text turns red.

---

2️⃣ Changing Background Colors

Class	Effect
.bg-primary	Blue background
.bg-secondary	Gray background
.bg-success	Green background
.bg-danger	Red background
.bg-warning	Yellow background
.bg-info	Cyan background
.bg-light	Light background
.bg-dark	Dark background

✅ Example: Changing Background Colors

🔹 What happens?

• First text has a green background with white text.
• Second text has a red background with light text.

---

📝 Lesson Recap Quiz

🎯 Test your understanding of Bootstrap typography.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What class makes text uppercase?
a) .text-upper
b) .text-bold
c) .text-uppercase
d) .text-strong

✅ Correct Answer: c) .text-uppercase

---

2️⃣ What is Bootstrap’s default font family?
a) “Poppins”, sans-serif
b) “Roboto”, sans-serif
c) System fonts like Arial and Helvetica
d) “Courier New”, monospace

✅ Correct Answer: c) System fonts like Arial and Helvetica

---

3️⃣ What class sets bold text?
a) .font-weight-bold
b) .fw-bold
c) .text-bold
d) .strong-text

✅ Correct Answer: b) .fw-bold

---

📌 True or False

4️⃣ Bootstrap provides utility classes to change text color.
✅ Answer: True

5️⃣ .text-muted makes text appear bold.
✅ Answer: False (It dims text color.)

---

🎯 Practical Challenge

✅ Apply Google Fonts (Poppins) to a Bootstrap page.
✅ Create a styled heading (.display-3) with a background color.
✅ Try aligning text differently (.text-center, .text-end).
✅ Post your solution in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Bootstrap typography utilities make styling text fast and flexible.
✅ .text-uppercase, .fw-bold, and .fst-italic modify text style.
✅ Google Fonts can be easily integrated with Bootstrap.
✅ Text and background colors improve readability.