Bootstrap 5 Text Alignment Classes

In Bootstrap 5, you can use utility classes to easily control the alignment of text within HTML elements. Here are some of the text alignment classes you can use:

• .text-start: This class aligns text to the start of the element, which is typically the left side.
• .text-end: This class aligns text to the end of the element, which is typically the right side.
• .text-center: This class centers the text within the element horizontally.

<p class="text-start">Text aligned to the start (left)</p>
<p class="text-end">Text aligned to the end (right)</p>
<p class="text-center">Text centered</p>

Text Alignment Classes for Different Breakpoint

To change text alignment at specific screen sizes, you can combine the text alignment classes with responsive breakpoint classes. Bootstrap provides classes for various screen sizes, such as sm (small), md (medium), lg (large), and xl (extra-large).

You can combine any of the available text alignment classes (.text-start, .text-end, .text-center) with responsive classes to achieve the desired text alignment at different breakpoints. This approach allows you to create responsive text layouts that adapt to various screen sizes.

<p class="text-center  text-sm-start">Centered text on small screens, left-aligned on larger screens</p>
<p class="text-end text-md-center">Right-aligned text on medium screens, center-aligned on larger screens</p>