BootstrapHow-ToBeginner · 3 min read

How to Align Text in Bootstrap: Simple Text Alignment Guide

In Bootstrap, you align text using utility classes like text-start for left alignment, text-center for center alignment, text-end for right alignment, and text-justify for justified text. Simply add these classes to your HTML elements to control text alignment easily.

📐

Syntax

Bootstrap provides simple utility classes to align text inside elements. Use these classes on any block-level or inline element:

text-start: Aligns text to the left.
text-center: Centers the text horizontally.
text-end: Aligns text to the right.
text-justify: Justifies the text (spreads it evenly across the line).

These classes replace older Bootstrap versions' text-left and text-right for better RTL (right-to-left) language support.

html

<div class="text-start">Left aligned text</div>
<div class="text-center">Center aligned text</div>
<div class="text-end">Right aligned text</div>
<div class="text-justify">Justified text example that stretches the lines to fill the container width evenly.</div>

Output

Left aligned text (aligned left) Center aligned text (centered horizontally) Right aligned text (aligned right) Justified text example that stretches the lines to fill the container width evenly.

💻

Example

This example shows how to use Bootstrap text alignment classes inside a simple webpage. Each paragraph uses a different alignment class to demonstrate the effect.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Text Alignment Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <p class="text-start">This text is aligned to the left.</p>
    <p class="text-center">This text is centered.</p>
    <p class="text-end">This text is aligned to the right.</p>
    <p class="text-break text-justify">This text is justified, so it stretches to fill the entire width of the container, making the edges line up evenly on both sides.</p>
  </div>
</body>
</html>

Output

Four paragraphs displayed vertically: - First paragraph text aligned left - Second paragraph text centered - Third paragraph text aligned right - Fourth paragraph text justified across the container width

⚠️

Common Pitfalls

Some common mistakes when aligning text in Bootstrap include:

Using outdated classes like text-left or text-right which are deprecated in Bootstrap 5.
Applying alignment classes to inline elements that do not support block-level alignment well.
Expecting text-justify to work perfectly on short lines or small containers; justification works best on longer paragraphs.
Not including the Bootstrap CSS file, so classes have no effect.

html

<!-- Wrong: deprecated classes -->
<div class="text-left">Old left alignment (deprecated)</div>

<!-- Right: use new classes -->
<div class="text-start">Correct left alignment</div>

Output

Old left alignment text may not align correctly in Bootstrap 5. Correct left alignment text aligns properly to the left.

📊

Quick Reference

Class	Effect
text-start	Align text to the left
text-center	Center text horizontally
text-end	Align text to the right
text-justify	Justify text (even edges)

✅

Key Takeaways

Use Bootstrap's text alignment classes like text-start, text-center, text-end, and text-justify to control text alignment easily.

Avoid deprecated classes such as text-left and text-right in Bootstrap 5.

Apply alignment classes to block-level elements for best results.

Justify text only for longer paragraphs to see the full effect.

Always include Bootstrap CSS for the classes to work.