Text Align

Utilities for controlling the alignment of text.

Contents

Easily realign text to components with the text alignment utilities.

Quick reference

Class	Properties
`.text-start`	text-align: left;
`.text-end`	text-align: right;
`.text-center`	text-align: center;
`.text-justify`	text-align: justify;

Basic usage

Setting the text alignment

Control the text alignment of an element using the text-start, text-center, text-end, and text-justify utilities.

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="text-start ...">So I started to walk into the water...</p>

<p class="text-end ...">So I started to walk into the water...</p>

<p class="text-center ...">So I started to walk into the water...</p>

<p class="text-justify ...">So I started to walk into the water...</p>

Breakpoints

For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. The classes are named using the format: .text-{breakpoint}-{side}. For example, use the text-md-center to apply the text are centered at only medium screen sizes and above.

<p class="text-start text-md-center">
  So I started to walk into the water ...
</p>