Text alignment utilities in Bootsrap

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>

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.

Practice

1. Which Bootstrap class aligns text to the right side of its container?

easy

A. text-start

B. text-center

C. text-right

D. text-end

Solution

1. Step 1: Understand Bootstrap text alignment classes

   Bootstrap uses text-start for left, text-center for center, and text-end for right alignment.

2. Step 2: Identify the class for right alignment

   The class text-end aligns text to the right side of the container.

3. Final Answer:

   text-end -> Option D

4. Quick Check:

   Right aligned text = text-end [OK]

Hint: Right alignment uses text-end class in Bootstrap [OK]

Common Mistakes:

• Using text-right which is not a Bootstrap 5 class
• Confusing text-start with right alignment
• Choosing text-center instead of right alignment

2. Which of the following is the correct syntax to center text on small screens and larger using Bootstrap?

easy

A. text-sm-center

B. text-center-sm

C. text-center-sm-up

D. text-center-sm-down

Solution

1. Step 1: Recall Bootstrap responsive text alignment classes

   Bootstrap uses the format text-{breakpoint}-{alignment} for responsive text alignment.

2. Step 2: Match the correct syntax for small screens and up

   The correct class to center text on small screens and larger is text-sm-center.

3. Final Answer:

   text-sm-center -> Option A

4. Quick Check:

   Responsive center text = text-sm-center [OK]

Hint: Responsive classes use text-{breakpoint}-{alignment} format [OK]

Common Mistakes:

• Placing breakpoint after alignment like text-center-sm
• Adding extra suffixes like -up or -down which don't exist
• Using incorrect order of class parts

3. What will be the alignment of the text inside this <p> tag on a medium screen?

<p class="text-md-end">Hello Bootstrap!</p>

medium

A. Text aligned to the left

B. Text aligned to the center

C. Text aligned to the right

D. Text alignment unchanged (default left)

Solution

1. Step 1: Understand the class text-md-end

   This class aligns text to the right starting at medium screen sizes and larger.

2. Step 2: Determine alignment on medium screen

   On medium screens, the text will be aligned to the right because of text-md-end.

3. Final Answer:

   Text aligned to the right -> Option C

4. Quick Check:

   Medium screen text alignment = right [OK]

Hint: md-end means right alignment on medium screens and up [OK]

Common Mistakes:

• Assuming text is centered instead of right aligned
• Thinking alignment applies only on small screens
• Ignoring responsive breakpoint effect

4. You want to align text to the center on all screen sizes but accidentally use text-center-sm. What is the problem with this class?

medium

A. It centers text only on small screens and larger, not on extra small screens

B. It causes a syntax error and text won't display

C. It aligns text to the left instead of center

D. It centers text only on extra small screens

Solution

1. Step 1: Understand text-center-sm meaning

   This class centers text starting from small screens and larger, but not on extra small screens.

2. Step 2: Identify the problem for extra small screens

   On extra small screens, text will not be centered but use default alignment (usually left).

3. Final Answer:

   It centers text only on small screens and larger, not on extra small screens -> Option A

4. Quick Check:

   text-center-sm skips extra small screens [OK]

Hint: Responsive classes start applying at their breakpoint, not before [OK]

Common Mistakes:

• Thinking it centers text on all screen sizes
• Assuming it causes syntax errors
• Confusing small screens with extra small screens

5. You want text to be left aligned on extra small screens, centered on medium screens, and right aligned on large screens. Which class combination achieves this?

hard

A. text-start text-center-md text-end-lg

B. text-start text-md-center text-lg-end

C. text-left text-center text-right

D. text-start-md text-center-lg text-end

Solution

1. Step 1: Identify classes for each breakpoint

   Left aligned on extra small screens uses text-start (applies by default). Center on medium screens uses text-md-center. Right on large screens uses text-lg-end.

2. Step 2: Check the class combination syntax

   text-start text-md-center text-lg-end correctly uses text-start, text-md-center, and text-lg-end in proper order and syntax.

3. Final Answer:

   text-start text-md-center text-lg-end -> Option B

4. Quick Check:

   Left, center, right at xs, md, lg = text-start text-md-center text-lg-end [OK]

Hint: Use text-start, text-md-center, text-lg-end for progressive alignment [OK]

Common Mistakes:

• Using incorrect class order or syntax
• Using deprecated classes like text-left
• Mixing breakpoint and alignment order incorrectly