What is Text alignment utilities in Bootsrap?

Bootsrapmarkup~5 mins

Text alignment utilities in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Text alignment utilities help you quickly change how text lines up inside an element. This makes your content look neat and easy to read.

You want to center a heading on your webpage.

You need to align a paragraph to the right for a special effect.

You want text to be justified so it looks like a newspaper column.

You want different text alignment on small and large screens for better reading.

You want to quickly fix text alignment without writing custom CSS.

Syntax

Bootsrap

class="text-start"  // Align text to the left
class="text-center" // Align text to the center
class="text-end"    // Align text to the right

// Responsive versions:
class="text-sm-start"  // Left align on small screens and up
class="text-md-center" // Center align on medium screens and up
class="text-lg-end"    // Right align on large screens and up

Use text-start for left alignment and text-end for right alignment to support languages that read left-to-right or right-to-left.

Responsive classes let you change alignment depending on screen size, making your site look good on phones and desktops.

Examples

Basic left alignment using text-start.

Bootsrap

<p class="text-start">This text is aligned to the left.</p>

Center align a heading with text-center.

Bootsrap

<h2 class="text-center">Centered Heading</h2>

Right align text using text-end.

Bootsrap

<div class="text-end">Right aligned content here.</div>

Text centers on small screens and moves to right on large screens.

Bootsrap

<p class="text-sm-center text-lg-end">Responsive text alignment.</p>

Sample Program

This example shows different text alignments using Bootstrap classes. Resize your browser to see the responsive alignment in action.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Text Alignment Utilities</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1 class="text-start">Left Aligned Heading</h1>
    <p class="text-center">This paragraph is centered on the page.</p>
    <p class="text-end">This paragraph is aligned to the right.</p>
    <p class="text-sm-center text-lg-end">
      This text is centered on small screens and right aligned on large screens.
    </p>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Text alignment classes use logical directions (start and end) to support languages that read right-to-left.

Always include the Bootstrap CSS link to use these utilities.

Try resizing your browser to see how responsive alignment changes text position.

Summary

Use text-start, text-center, and text-end to align text easily.

Responsive classes like text-sm-center let you change alignment on different screen sizes.

These utilities help keep your text neat and readable without writing extra CSS.