Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Headings in Bootstrap 5

Headings: HTML headings from <h1> to <h6> with built-in styling.

Basic Headings

All HTML Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<!-- Basic HTML Headings -->
            <h1>h1. Bootstrap heading</h1>
            <h2>h2. Bootstrap heading</h2>
            <h3>h3. Bootstrap heading</h3>
            <h4>h4. Bootstrap heading</h4>
            <h5>h5. Bootstrap heading</h5>
            <h6>h6. Bootstrap heading</h6>

Heading Classes

Using `.h1` to `.h6` Classes

Make any element look like a heading by using heading classes:

Paragraph with .h1 class

Paragraph with .h2 class

Paragraph with .h3 class

Paragraph with .h4 class

Paragraph with .h5 class

Paragraph with .h6 class

Element	Class	Result	Semantic Value
`<p>`	`.h1`	Looks like h1	Paragraph (no heading semantics)
`<div>`	`.h2`	Looks like h2	Div (no heading semantics)
`<span>`	`.h3`	Looks like h3	Span (no heading semantics)

Important: Heading classes only change visual appearance, not semantic meaning. For SEO and accessibility, use proper HTML heading tags (<h1> to <h6>).

Heading Specifications

Technical Details

Heading	Class	Font Size	Line Height	Font Weight	Margin Bottom
`<h1>`	`.h1`	2.5rem (40px)	1.2	500	0.5rem (8px)
`<h2>`	`.h2`	2rem (32px)	1.2	500	0.5rem (8px)
`<h3>`	`.h3`	1.75rem (28px)	1.2	500	0.5rem (8px)
`<h4>`	`.h4`	1.5rem (24px)	1.2	500	0.5rem (8px)
`<h5>`	`.h5`	1.25rem (20px)	1.2	500	0.5rem (8px)
`<h6>`	`.h6`	1rem (16px)	1.2	500	0.5rem (8px)

Default CSS (Example for h1)

h1, .h1 {
            font-size: 2.5rem;
            font-weight: 500;
            line-height: 1.2;
            margin-bottom: 0.5rem;
            margin-top: 0;
            }

Responsive Behavior

Headings are responsive by default. They scale down on smaller screens.

On mobile: h1 = 2rem (32px)
On desktop: h1 = 2.5rem (40px)

Customizing Headings

Secondary Text with `<small>`

Fancy display heading With faded secondary text

Main heading Subheading

<h3>
            Main heading
            <small class="text-muted">Secondary text</small>
            </h3>

The <small> tag creates lighter, smaller text within a heading.

Using `.small` Class

Main headingUsing .small class

This entire paragraph is smaller text.

<!-- Using .small class -->
            <h3>
            Main heading
            <span class="small text-muted">Secondary text</span>
            </h3>

            <p class="small">Small paragraph text</p>

The .small class reduces font size to 80%.

Heading with Utility Classes

Combining with Other Utilities

Text Alignment

Centered Heading

Right Aligned Heading

Left Aligned Heading

Text Colors

Primary Heading

Success Heading

Danger Heading

Warning Heading

Responsive Alignment

Responsive heading alignment

Center on mobile, left on tablet, right on desktop

<!-- Heading with multiple utilities -->
            <h1 class="text-center text-primary mb-4">
            Centered Primary Heading
            </h1>

            <h2 class="text-success fw-bold">
            Bold Success Heading
            </h2>

            <h3 class="text-center text-md-start text-lg-end">
            Responsive alignment
            </h3>

Heading Hierarchy Best Practices

Proper Heading Structure

✅ Correct Hierarchy

Main Title (h1)

Section Heading (h2)

Subsection (h3)

Sub-subsection (h4)

Another Section (h2)

Subsection (h3)

<!-- Correct heading structure -->
            <h1>Main Title</h1>
            <h2>Section 1</h2>
            <h3>Subsection 1.1</h3>
            <h3>Subsection 1.2</h3>
            <h2>Section 2</h2>
            <h3>Subsection 2.1</h3>

❌ Incorrect Hierarchy

Main Title (h1)

Skipped h2 (h3)

Wrong order (h2)

Skipped h3 (h4)

Don't skip heading levels! Always go from h1 → h2 → h3 → h4 → h5 → h6 in order. Skipping levels confuses screen readers and hurts SEO.

Heading Use Cases

Page Title (h1)

About Us

Use h1 once per page for main title.

Section Headings (h2)

Our Services

Use h2 for major sections.

Subsection (h3)

Web Development

Use h3 for subsections.

Card Titles (h4/h5)

Feature Card

Use h4 or h5 for card titles.

Sidebar Headings (h5/h6)

Form Labels

Contact Information

Use heading classes for styled labels.

Accessibility Considerations

Heading Accessibility Best Practices

One h1 per page: Only use one h1 element per page
Proper hierarchy: Don't skip heading levels (h1 → h2 → h3)
Semantic meaning: Use actual heading tags, not just heading classes
Descriptive text: Make headings meaningful and descriptive
Screen readers: Headings create document outline for screen readers

Common Mistakes

❌ Using multiple h1 elements on one page
❌ Skipping heading levels (h1 → h3)
❌ Using heading classes without semantic tags
❌ Using headings for styling only
❌ Making headings too long or unclear

Responsive Heading Sizes

Default Responsive Behavior

Bootstrap headings are responsive by default. They scale down on smaller screens.

Heading	Mobile	Desktop
`h1`	2rem (32px)	2.5rem (40px)
`h2`	1.75rem (28px)	2rem (32px)
`h3`	1.5rem (24px)	1.75rem (28px)

Custom Responsive Headings

Use responsive font size utilities for more control:

Custom responsive heading

Changes size at different breakpoints

<h1 class="fs-1 fs-md-2 fs-lg-1">
            <!-- 
                fs-1 on mobile (2.5rem)
                fs-2 on tablet (2rem)
                fs-1 on desktop (2.5rem)
            -->
            </h1>

Customizing Headings with SCSS

SCSS Variables for Headings

Customize heading styles in your SCSS variables:

// Customize heading variables
            $headings-margin-bottom:      1rem;
            $headings-font-family:        null;
            $headings-font-style:         null;
            $headings-font-weight:        600; // Changed from 500
            $headings-line-height:        1.3; // Changed from 1.2
            $headings-color:              null;

            // Custom heading font sizes
            $h1-font-size:                3rem;    // Changed from 2.5rem
            $h2-font-size:                2.5rem;  // Changed from 2rem
            $h3-font-size:                2rem;    // Changed from 1.75rem
            $h4-font-size:                1.75rem; // Changed from 1.5rem
            $h5-font-size:                1.5rem;  // Changed from 1.25rem
            $h6-font-size:                1.25rem; // Changed from 1rem

            // Responsive font sizes
            $enable-responsive-font-sizes: true;

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

Note: To customize headings, you need to compile Bootstrap from SCSS source files.

Practical Examples

Blog Post Structure

The Future of Web Development

Published on January 15, 2024

Introduction

Web development is evolving rapidly with new technologies...

Frontend Technologies

React, Vue, and Angular continue to dominate...

Backend Innovations

Serverless architecture is gaining popularity...

Conclusion

The future looks bright for web developers...

Product Feature Section

Our Features

Fast Performance

Lightning fast loading times.

Secure

Enterprise-grade security.

24/7 Support

Round the clock assistance.

Easy Integration

Simple API integration.

Heading Best Practices Summary

✅ Use one h1 per page for main title
✅ Maintain proper hierarchy (h1 → h2 → h3)
✅ Use heading tags for semantic value
✅ Combine with utility classes for styling
✅ Make headings descriptive and meaningful
✅ Test with screen readers for accessibility
✅ Consider responsive sizing for different devices

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