ComboStrap Styling - Text Align Attribute

About

text-align is a typographic attribute that sets the alignment of the lines of text inside a block component.

Syntax

text-align=[breakpoint-]value

where:

  • breakpoint is optional and takes one of the breakpoint values (ie screen size) (only on Bootstrap 5)
    • sm: small
    • md: medium
    • lg: large
    • xl: extra-large
  • the value may be:
    • start - left for a LTR language and right for a RTL language - (default)
    • center
    • end - right left for a LTR language and left for a RTL language
    • justify (While, aesthetically, justified because the text might look more appealing, it does make word-spacing more random and therefore harder to read.)

Demo

Basic

This example uses the general box component but it should work for all other block components.

<box text-align="start">
This line of text is at the **start** of the block (left for a left-to-right language)
</box>
<box text-align="center">
This line of text is **centered** inside the block.
</box>
<box text-align="end">
This line of text is at the **end** of the block (right for a left-to-right language)
</box>
  • Output:

This line of text is at the start of the block (left for a left-to-right language)

This line of text is centered inside the block.

This line of text is at the end of the block (right for a left-to-right language)

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.

Screen Conditional

This example was made with the text component and shows a conditional value based on screen size

  • Input
<text text-align="sm-end">End aligned text on SM (small) screen or wider.</text>
<text text-align="md-center">Default (Start) align on SM (small screen), then Center aligned from MD (medium) screen and wider.</text>
<text text-align="md-center lg-end">Default (Start) align on SM (small screen), then Center aligned from MD (medium), then End aligned text on LG (large) screen and wider.</text>
<text text-align="xl-center">Default (Start) align on SM (small screen), then Center aligned text on XL (extra-large) screen and wider.</text>
  • Output:

End aligned text on SM (small) screen or wider.

Default (Start) align on SM (small screen), then Center aligned from MD (medium) screen and wider.

Default (Start) align on SM (small screen), then Center aligned from MD (medium), then End aligned text on LG (large) screen and wider.

Default (Start) align on SM (small screen), then Center aligned text on XL (extra-large) screen and wider.

Powered by ComboStrap