How to align a text ?

About

This howto will show you how you can align your text.

Use align

With ComboStrap, text alignment is only defined via the align attribute.

There is three possible alignement:

• start, ie
  • left for a left-to-right language
  • right for a right-to-left language
• end, ie:
  • right for a left-to-right language
  • left for a right-to-left language
• center

This example uses the text component (to add a margin space between the lines) but it should work for all other block components.

Start

<text align="text-start">
This line of text is at the **start** of the block (left for a left-to-right language)
</text>

• Output:

Center

<text align="text-center">
This line of text is **centered** inside the block.
</text>

• Output:

Centered text in a card

A centered text in a card:

<card text-align="center" width="300px">
==== Centered Text in a Card  ====

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</card>

End

<text align="text-end">
This line of text is at the **end** of the block (right for a left-to-right language)
</text>

• Output:

Next

Learn how to apply a text alignment conditionally. How to align a text based on screen size ?