Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Font Weight & Style in Bootstrap 5

Font Weight & Style: Control font weight and style with utility classes.

Font Weight Utilities

All Font Weight Classes

Bold text.

Bolder weight text (relative to the parent element).

Semibold weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Class	Font Weight	CSS Equivalent	Use Case	Example
`fw-bold`	700	`font-weight: 700 !important`	Emphasized text	Bold
`fw-bolder`	Bolder (relative)	`font-weight: bolder !important`	Relative emphasis	Bolder
`fw-semibold`	600	`font-weight: 600 !important`	Semi-important text	Semibold
`fw-normal`	400	`font-weight: 400 !important`	Reset to normal	Normal
`fw-light`	300	`font-weight: 300 !important`	Light text	Light
`fw-lighter`	Lighter (relative)	`font-weight: lighter !important`	Relative lightness	Lighter

<!-- Font weight utilities -->
            <p class="fw-bold">Bold text</p>
            <p class="fw-bolder">Bolder text</p>
            <p class="fw-semibold">Semibold text</p>
            <p class="fw-normal">Normal weight text</p>
            <p class="fw-light">Light text</p>
            <p class="fw-lighter">Lighter text</p>

Font Style Utilities

Font Style Classes

Italic text.

Text with normal font style.

`fst-italic`

This text is italicized using the fst-italic class.

`fst-normal`

This text has normal font style (removes italics).

Class	Effect	CSS Equivalent	Use Case
`fst-italic`	Italic text	`font-style: italic !important`	Citations, quotes, emphasis
`fst-normal`	Normal font style	`font-style: normal !important`	Remove italics from elements

Font Weight with Other Elements

Headings with Font Weight

Light Heading

Normal Heading

Bold Heading

Light Italic Heading

<h1 class="fw-light">Light Heading</h1>
            <h2 class="fw-normal">Normal Heading</h2>
            <h3 class="fw-bold">Bold Heading</h3>
            <h4 class="fw-light fst-italic">Light Italic</h4>

Buttons with Font Weight

<button class="btn btn-primary fw-bold">
            Bold Button
            </button>

            <button class="btn btn-success fw-light">
            Light Button
            </button>

            <button class="btn btn-warning fst-italic">
            Italic Button
            </button>

Responsive Font Weight

Breakpoint-based Font Weight

Example: Different Font Weight on Different Screens

This text is bold on mobile, normal on tablet, and light on desktop.

Screen Size	Class Applied	Font Weight	Use Case
Mobile (<768px)	`fw-bold`	700 (Bold)	Emphasis on small screens
Tablet (≥768px)	`fw-md-normal`	400 (Normal)	Standard weight on medium screens
Desktop (≥992px)	`fw-lg-light`	300 (Light)	Light weight on large screens

More Examples

Light on mobile, bold on tablet, normal on desktop.

Normal on mobile, italic on tablet and larger.

<!-- Responsive font weight -->
            <p class="fw-bold fw-md-normal fw-lg-light">
            Bold → Normal → Light
            </p>

            <p class="fw-light fw-md-bold">
            Light on mobile, bold on tablet+
            </p>

            <!-- Responsive font style -->
            <p class="fst-normal fst-md-italic">
            Normal on mobile, italic on tablet+
            </p>

Font Weight Hierarchy

Creating Visual Hierarchy

Example: Content Hierarchy

Main Title

Important Subheading

Regular content paragraph that provides details and explanations for the main topic.

Additional notes or less important information.

Weight Hierarchy

Bold (700) - Most important
Semibold (600) - Important
Normal (400) - Regular content
Light (300) - Secondary content
Lighter - Least important

Best Practices

Use 2-3 weights maximum per section
Be consistent with weight meanings
Avoid using all weights on one page
Consider readability on different devices
Test contrast with different weights

Monospace Font

Monospace Font Utility

This text is in a monospace font. Perfect for code snippets, technical documentation, or any content that needs fixed-width characters.

`font-monospace`

// This is a code comment
function example() {
console.log("Hello");
}

Combined with Font Weight

$ npm install bootstrap

Class	Font Family	Use Case	Example
`font-monospace`	SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace	Code, technical content	monospace

Text Decoration

Text Decoration Classes

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

`text-decoration-underline`

Underlined text

`text-decoration-line-through`

Strikethrough text

`text-decoration-none`

Link without underline

Class	Effect	CSS Equivalent	Use Case
`text-decoration-underline`	Underline text	`text-decoration: underline`	Emphasis, required fields
`text-decoration-line-through`	Strikethrough text	`text-decoration: line-through`	Deleted content, discounts
`text-decoration-none`	Remove text decoration	`text-decoration: none`	Links without underlines

Practical Examples

Example 1: Pricing Table

Pro Plan

For growing businesses

$29/month

✓ 10 Projects
✓ 100GB Storage
✓ Priority Support

Example 2: Article Content

Understanding CSS Font Weight

Introduction

Font weight plays a crucial role in typography hierarchy and readability.

Key Concepts

Bold (700): For emphasis
Semibold (600): For subheadings
Light (300): For secondary text

Last updated: January 2024

Accessibility Considerations

Font Weight Accessibility

Contrast: Light font weights may have poor contrast
Readability: Very light weights can be hard to read
Visual hierarchy: Maintain clear hierarchy for screen readers
Consistency: Use consistent weight meanings throughout
Zoom support: Test readability when zoomed in
Dyslexia: Some dyslexic readers prefer heavier weights

Minimum Recommendations

Body text: 400 (normal) or higher
Avoid 300 (light) for important content
Test with WCAG contrast checkers
Consider user preferences for font weight

Customizing Font Weights

SCSS Customization

Customize font weights in your SCSS variables:

// Custom font weights
            $font-weight-lighter:  200;  // Changed from lighter
            $font-weight-light:    300;
            $font-weight-normal:   400;
            $font-weight-semibold: 500;  // Changed from 600
            $font-weight-bold:     700;
            $font-weight-bolder:   800;  // Changed from bolder

            // Custom font families
            $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto;
            $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;

            // Generate font weight utilities
            $font-weights: (
            "light": $font-weight-light,
            "lighter": $font-weight-lighter,
            "normal": $font-weight-normal,
            "semibold": $font-weight-semibold,
            "bold": $font-weight-bold,
            "bolder": $font-weight-bolder,
            "extra-bold": 900  // Custom weight
            );

            // Import Bootstrap
            @import "bootstrap/scss/bootstrap";

            // Custom CSS class
            .fw-extra-bold {
            font-weight: 900 !important;
            }

Note: After customizing font weights, Bootstrap will generate updated utility classes.

Performance Considerations

Font Weight Performance

Font loading: Each font weight may require separate font file
Web fonts: Limit number of font weights used
System fonts: System font stacks have no performance impact
CSS size: Each utility class adds to CSS bundle
Render performance: Too many font weights can impact rendering
Best practice: Use 2-3 weights maximum per font family

Best Practices

✅ Best Practices

Use consistent weight meanings
Limit to 2-3 weights per page
Test contrast for light weights
Use semantic hierarchy
Consider responsive behavior
Test with screen readers

❌ Common Mistakes

Using too many different weights
Using light weights for body text
Inconsistent weight usage
Not testing on different devices
Ignoring performance implications
Forgetting about accessibility

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial