text-align

Utilities for controlling the alignment of text.

Class Styles

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

text-left

text-align: left;

text-center

text-align: center;

text-right

text-align: right;

text-justify

text-align: justify;

text-start

text-align: start;

text-end

text-align: end;

Examples

Left aligning text

Use the text-left utility to left align the text of an element:

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-left">So I started to walk into the water...</p>

Right aligning text

Use the text-right utility to right align the text of an element:

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

Centering text

Use the text-center utility to center the text of an element:

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

Justifying text

Use the text-justify utility to justify the text of an element:

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

Responsive design

Prefix a text-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-left md:text-center ...">  <!-- ... --></p>

Learn more about using variants in the variants documentation.