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>

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:

1. In the code above, we have created <p> tag.
2. 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.
3. 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.
4. 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.