software-development-company-logo

Tag: Lesson 9: Typography & Custom Fonts in Bootstrap

  • Lesson 9: Typography & Custom Fonts in Bootstrap

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    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

    html
    <div class="container">
    <h1 class="display-1">Display 1 Heading</h1>
    <h2 class="display-2">Display 2 Heading</h2>
    <h3 class="display-3">Display 3 Heading</h3>
    <p class="lead">This is a lead paragraph for emphasis.</p>
    <p class="text-muted">This is a muted paragraph.</p>
    </div>

    🔹 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

    html
    <div class="container">
    <p class="text-center text-uppercase">This text is centered and uppercase.</p>
    <p class="text-end text-lowercase">this text is right-aligned and lowercase.</p>
    </div>

    🔹 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

    html
    <div class="container">
    <p class="fw-bold">Bold Text</p>
    <p class="fw-light fst-italic">Light Italic Text</p>
    </div>

    🔹 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:

    css
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    🔹 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

    html
    <!-- Link Google Font in <head> -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">

    <!-- Apply to Bootstrap Text -->
    <div class="container">
    <p class="custom-font">This text uses Poppins font.</p>
    </div>

    <!-- Custom CSS -->
    <style>
    .custom-font {
    font-family: 'Poppins', sans-serif;
    }
    </style>

    🔹 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

    html
    <p class="text-primary">Primary Blue Text</p>
    <p class="text-danger">Danger Red Text</p>

    🔹 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

    html
    <p class="bg-success text-white p-3">Green Background with White Text</p>
    <p class="bg-danger text-light p-3">Red Background with Light Text</p>

    🔹 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.