Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Text Alignment in Bootstrap 5

Text Alignment: Easily realign text to components with text alignment classes.

Basic Text Alignment

Three Alignment Options

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

<!-- Basic text alignment -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>

`text-start`

Left aligned text

`text-center`

Centered text

`text-end`

Right aligned text

Responsive Text Alignment

Breakpoint-based Alignment

Example: Different Alignment on Different Screens

This text is left aligned on mobile, center aligned on tablet, and right aligned on desktop.

Screen Size	Class Applied	Alignment	Reason
Mobile (<768px)	`text-start`	Left	Easier reading on small screens
Tablet (≥768px)	`text-md-center`	Center	Better balance on medium screens
Desktop (≥992px)	`text-lg-end`	Right	Clean layout on large screens

More Examples

Centered on mobile, left aligned on tablet and larger.

Right on mobile, center on small+, left on medium+.

<!-- Responsive text alignment -->
<p class="text-start text-md-center text-lg-end">
  Left on mobile, center on tablet, right on desktop
</p>

<p class="text-center text-md-start">
  Centered on mobile, left on tablet+
</p>

<p class="text-end text-sm-center">
  Right on mobile, center on small+
</p>

All Breakpoint Alignment Classes

Complete Class Reference

Class	Breakpoint	Alignment	Example
`text-start`	All screens	Left align	Always left
`text-center`	All screens	Center align	Always center
`text-end`	All screens	Right align	Always right
`text-sm-start`	sm and up	Left on small+	Left on tablet+
`text-sm-center`	sm and up	Center on small+	Center on tablet+
`text-sm-end`	sm and up	Right on small+	Right on tablet+
`text-md-start`	md and up	Left on medium+	Left on desktop+
`text-md-center`	md and up	Center on medium+	Center on desktop+
`text-md-end`	md and up	Right on medium+	Right on desktop+
`text-lg-start`	lg and up	Left on large+	Left on large screens+
`text-lg-center`	lg and up	Center on large+	Center on large screens+
`text-lg-end`	lg and up	Right on large+	Right on large screens+
`text-xl-start`	xl and up	Left on x-large+	Left on extra large+
`text-xl-center`	xl and up	Center on x-large+	Center on extra large+
`text-xl-end`	xl and up	Right on x-large+	Right on extra large+
`text-xxl-start`	xxl and up	Left on xx-large+	Left on 1400px+
`text-xxl-center`	xxl and up	Center on xx-large+	Center on 1400px+
`text-xxl-end`	xxl and up	Right on xx-large+	Right on 1400px+

Text Alignment with Other Elements

Headings Alignment

Centered Heading

Right Aligned Heading

Left Aligned Heading

<h1 class="text-center">Centered Heading</h1>
<h2 class="text-end">Right Aligned Heading</h2>
<h3 class="text-start">Left Aligned Heading</h3>

Buttons Alignment

<div class="text-center">
  <button class="btn btn-primary">Centered</button>
</div>

<div class="text-end">
  <button class="btn btn-success">Right</button>
</div>

<div class="text-start">
  <button class="btn btn-warning">Left</button>
</div>

Images Alignment

Centered Image

Right Image

<div class="text-center">
  <img src="image.jpg" class="img-fluid">
</div>

<div class="text-end">
  <img src="image.jpg" class="img-fluid">
</div>

Forms Alignment

<form>
  <div class="text-center mb-3">
    <label class="form-label">Centered Label</label>
    <input type="text" class="form-control">
  </div>
  <div class="text-end">
    <button type="submit" class="btn btn-primary">
      Right Aligned
    </button>
  </div>
</form>

Vertical Alignment

Aligning Inline and Table Cells

Inline Elements

baselinetopmiddlebottomtext-toptext-bottom

Table Cells

baseline

top

middle

bottom

text-top

text-bottom

Class	Effect	Use Case
`align-baseline`	Aligns to baseline of parent	Text alignment
`align-top`	Aligns to top of parent	Icons with text
`align-middle`	Aligns to middle of parent	Vertical centering
`align-bottom`	Aligns to bottom of parent	Bottom alignment
`align-text-top`	Aligns to top of text	Text with images
`align-text-bottom`	Aligns to bottom of text	Text with images

Text Justification

Text Justify Classes

This text is justified. Notice how it stretches the lines so that each line has equal width (like in magazines and newspapers). This can be useful for creating clean, aligned paragraphs but may create uneven word spacing.

Justified Text

This text is justified to fill the container width evenly on both left and right sides.

text-justify

Responsive Justify

Justified on mobile, left aligned on tablet and larger.

text-justify text-md-start

Note: Justified text can create &qout;rivers&qout; of white space and uneven word spacing. Use it sparingly and test readability.

Text Alignment Best Practices

✅ When to Use Each Alignment

Left align: Body text, lists, forms
Center align: Headings, hero text, buttons
Right align: Numbers, dates, actions
Justify: Newspapers, formal documents

❌ Common Mistakes

Center aligning long paragraphs
Mixing too many alignments on one page
Not considering responsive behavior
Overusing justified text
Forgetting about RTL languages

RTL (Right-to-Left) Support

Text Alignment for RTL Languages

Bootstrap has built-in support for RTL languages like Arabic, Hebrew, and Persian.

LTR (Left-to-Right)

Text starts from left

Text ends at right

RTL (Right-to-Left)

النص يبدأ من اليمين

النص ينتهي عند اليسار

Note: In RTL mode, text-start aligns to the right and text-end aligns to the left.

Practical Examples

Example 1: Hero Section

Welcome to Our Platform

Build amazing applications with our tools and services.

<div class="text-center py-4">
  <h1 class="display-5">Welcome</h1>
  <p class="lead">Build amazing applications...</p>
  <div class="text-center text-md-start">
    <button class="btn btn-primary btn-lg">
      Get Started
    </button>
  </div>
</div>

Example 2: Pricing Table

Pricing Plans

Basic

$9/month

Pro

$29/month

Text Wrap and Overflow

Text Wrapping Classes

`text-wrap`

This text should wrap to multiple lines.

`text-nowrap`

This text should not wrap and will overflow.

`text-truncate`

This is a very long text that will be truncated with an ellipsis.

Class	Effect	Use Case
`text-wrap`	Allows text to wrap to next line	Badges, buttons with long text
`text-nowrap`	Prevents text wrapping	Table headers, navigation items
`text-truncate`	Truncates text with ellipsis	Limited space containers

Accessibility Considerations

Text Alignment Accessibility

Readability: Left-aligned text is easiest to read for most languages
Center alignment: Can be harder to read in long paragraphs
Justified text: May create uneven spacing that affects readability
Mixed alignment: Can be confusing for users with cognitive disabilities
RTL support: Ensure proper alignment for international users
Zoom testing: Test alignment when users zoom in on the page

← Display Headings Next: Text Colors →

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