WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Text/Typography

~1 min read · Bootstrap
On this page
❮ Previous Next ❯

Bootstrap 5 provides a range of typography utilities to help style and format text elements consistently.Here’s a quick overview:

Headings

Bootstrap provides classes for all HTML heading elements (<h1> to <h6>) for easy typography customization. You can use these directly or apply classes to any element to make it look like a heading.

Example

Try it yourself

Lead Text:

    Use the .lead class for highlighting introductory text or making paragraphs stand out.

Example

This is a lead paragraph. It stands out to catch attention.

Try it yourself

Text Alignment:

Bootstrap provides classes to align text easily:

  • .text-start, .text-center, and .text-end
  • For responsive alignment, use .text-sm-start, .text-md-center, .text-lg-end, etc.
Example

This text is centered.

This text is right-aligned.

This text is responsive text-aligned.

Try it yourself

Text Color

  • You can apply text color with these classes:.text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-muted, .text-white
Example

Primary text

Success text

Secondary text

Danger text

Warning text

Info text

Light text

Dark text

Muted text

White text

Try it yourself

Font Size:

.fs-1 to .fs-6 can adjust font sizes responsively.

Class

Font Size (Default)

Description

fs-1

2.5rem (40px)

Largest font size.

fs-2

2rem (32px)

Second largest font size.

fs-3

1.75rem (28px)

Medium-large font size.

fs-4

1.5rem (24px)

Medium font size.

fs-5

1.25rem (20px)

Smaller medium font size.

fs-6

1rem (16px)

Default font size.

Go To HTML Samples

Try it yourself

Font Weight and Italics:

  • .fw-bold, .fw-bolder, .fw-normal .fw-light, .fw-lighter, for font weight.
  • .fst-italic, .fst-normal for italics.
Font weight Example

This is bold text

This is bolder text

This is normal weight text

This is light text

This is lighter text

Try it yourself
Font weight and italic Example

Bootstrap font weight and italic

This text is italicized

This text is normal, not italicized


Bold and italicized text

Light weight and not italicized

Try it yourself

Line Height:

    These line height class make it easy to adjust the spacing between lines of text without writing custom CSS.

  • lh-1: Sets line height to 1
  • lh-sm: Small line height, typically around 1.25
  • lh-base: Default line height, usually 1.5
  • lh-lg: Large line height, typically around 2
Example

This text has a line height of 1.

This text has a small line height.

This text has the default line height.

This text has a large line height.

Try it yourself

Text Wrapping and Overflow:

  • text-wrap: Allows text to wrap within the container.
  • text-nowrap: Prevents text from wrapping.
  • text-truncate: Truncates text with an ellipsis if it exceeds container width.
  • Overflow: Control overflow with overflow-auto, overflow-hidden, overflow-visible, overflow-scroll.
Example

This text will not wrap and stay on a single line.

This is a long line that will truncate with an ellipsis if it doesn’t fit.
Try it yourself

Text Transformation:

  • text-uppercase: Uppercase text.
  • text-lowercase: Lowercase text.
  • text-capitalize: Capitalizes each word
Example

This text will be uppercase.

This text will be lowercase.

this text will be capitalized.

Try it yourself

❮ Previous Next ❯