How to align a text ?

Undraw Animating

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:

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 ?




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How to align a text based on screen size ?

This howto shows you how to apply a text alignment that depends on the screen size. In the text align howto, you have learned to apply one of the tree possible text alignment. In this howto, you will...




Task Runner