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
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:
This line of text is at the start of the block (left for a left-to-right language)
Center
<text align="text-center">
This line of text is **centered** inside the block.
</text>
- Output:
This line of text is centered inside the block.
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>
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.
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:
This line of text is at the end of the block (right for a left-to-right language)
Next
Learn how to apply a text alignment conditionally. How to align a text based on screen size ?