WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Text/Typography

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
<p class="lead">This is a lead paragraph. It stands out to catch attention.</p>
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
<p class="text-center">This text is centered.</p>
<p class="text-end">This text is right-aligned.</p>
<p class="text-sm-start text-md-center text-lg-end">This text is responsive text-aligned.</p>
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
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white">White text</p>
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
<p class="fw-bold">This is bold text</p>
<p class="fw-bolder">This is bolder text</p>
<p class="fw-normal">This is normal weight text</p>
<p class="fw-light">This is light text</p>
<p class="fw-lighter">This is lighter text</p>
Try it yourself
Font weight and italic Example
<h1>Bootstrap font weight and italic</h1>
<p class="fst-italic">This text is italicized</p>
<p class="fst-normal">This text is normal, not italicized</p>
<br/>
<p class="fw-bold fst-italic">Bold and italicized text</p>
<p class="fw-light fst-normal">Light weight and not italicized</p>
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
<p class="lh-1">This text has a line height of 1.</p>
<p class="lh-sm">This text has a small line height.</p>
<p class="lh-base">This text has the default line height.</p>
<p class="lh-lg">This text has a large line height.</p>
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
<p class="text-nowrap">This text will not wrap and stay on a single line.</p>
<div class="text-truncate" style="width: 150px;">
This is a long line that will truncate with an ellipsis if it doesn’t fit.
</div>
Try it yourself

Text Transformation:

  • text-uppercase: Uppercase text.
  • text-lowercase: Lowercase text.
  • text-capitalize: Capitalizes each word
Example
<p class="text-uppercase">This text will be uppercase.</p>
<p class="text-lowercase">This text will be lowercase.</p>
<p class="text-capitalize">this text will be capitalized.</p>
Try it yourself

Previous Next