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