Bootstrap text align classes are helpful to align text content in different positions. You can align text content to the left, right, and center positions as well as justify them easily using using Bootstrap.
Below are the classes with the examples to easily align text content in Bootstrap.
Bootstrap Text Align Classes
There is five bootstrap text align classes given below to make alignment of the text content.
| Text align Classes | Description |
|---|---|
.text-left |
Align your text content to the left position using this class. |
.text-right |
Right align the text content position using this class |
.text-center |
If you want to make text align to the center position, you can use this class. |
.text-justify |
Justify align the text content using this class. |
.text-nowrap |
The text will never wrap to the next line until you use the <br> tag. |
Left Align Text in Bootstrap
If you want to left align the text content using Bootstrap, you can use bootstrap .text-left class. See the example below showing the left aligned text content using bootstrap.
|
1 |
<p class="text-left">Left align text in Bootstrap using <code>.text-left</code> class.</p> |
Output
Left align text in Bootstrap using .text-left class.
Right Align Text in Bootstrap
Bootstrap provides a class .text-right to right align the text content. You have to just add this class to right align the text content.
See the example below to right align the text content using Bootstrap.
|
1 |
<p class="text-right">Right align text in Bootstrap using <code>.text-right</code> class.</p> |
Output
Right align text in Bootstrap using .text-right class.
Center Align Text in Bootstrap
To make text center aligned using Bootstrap, you can use Bootstrap .text-center class. See the example below to center align the text content using bootstrap.
|
1 |
<p class="text-center">Center align text in Bootstrap using <code>.text-center</code> class.</p> |
Output
Center align text in Bootstrap using .text-center class.
Justify Text Align in Bootstrap
If you want to make text justify aligned using Bootstrap, you have to use Bootstrap class .text-justify.
See the example below to justify align the text content using Bootstrap.
|
1 |
<p class="text-justify">This is the paragraph to show the justified text content using <code>.text-justify</code>. You can align with all the available positions by adding single class of bootstrap. It also provides the wrap property of CSS with just one single class.</p> |
Output
This is the paragraph to show the justified text content using .text-justify. You can align with all the available positions by adding single class of bootstrap. It also provides the wrap property of CSS with just one single class.
Nowrap Text in Bootstrap
Bootstrap also provides a class .text-nowrap to make white space property no wrap until you use the <br> tag.
See the example below to make use the nowrap class of Bootstrap.
|
1 |
<p class="text-nowrap">This is the paragraph to show the text nowrap alignment.</p> |
Output
This is the paragraph to show the text nowrap alignment.