Table of Contents

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:

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>
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.

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 ?