Bootstrap Text Align Classes
In this article, we will discuss Bootstrap text alignment-related classes. We understand how to align text horizontally and vertically using the bootstrap class.
-
- text-*-left: aligns text to the left in its container
<p class=“text-left">Some Text</p>
- text-*-center: aligns text to the center in its container
<p class="text-center"> Some Text </p>
- text-*-right: aligns text to the right in its container
<p class="text-right"> Some Text </p>
- text-*-left: aligns text to the left in its container
Where
*= sm, md, Ig, x!
- text-justify: justifies the content in its container
<p class="text-justify"> Some Text </p>
Example code:
<p class="bg-primary text-white text-left"> Some Text </p>
<p class: "bg- primary text-white text-center"> Some Text </p>
<p class="bg-primary text-white text-right"> Some Text </p>
Output:
- In the code above, we have created <p> tag.
- I want to set a blue background color, so I used the “bg-primary” class. Then I want to set the text color to white, so I used the “text-white” bootstrap class.
- And then I want to align a text to left, So I used the “text-left” class. If you want to align text to right, you can use the “text-right” bootstrap classes as in the above code.
- See the output, the first paragraph text is aligned to left, the second paragraph text is aligned to the center and then the third paragraph text is aligned to right.