How to align a text based on screen size ?

Undraw Animating

How to align a text based on screen size ?

About

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 see how you can apply this alignment based on the screen size (mobile, desktop, …)

All text alignment are done via the align attribute. This attribute supports what we called conditional value. By adding a breakpoint value as suffix, you will enable this value from this screen size.

Example

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

To see them in action, you should resize your browser windows.

End aligned text from small screen and wider

  • Input
<text align="text-end-sm">End aligned text from SM (small) screen and wider, start for mobile phone</text>
  • output

End aligned text from SM (small) screen and wider, start for mobile phone

Center aligned from medium screen and wider

  • Input
<text align="text-center-md">Default (Start) align on SM (small screen), then Center aligned from MD (medium) screen and wider.</text>
  • output

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

Start on small screen, center from medium, then End on large screen and wider

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

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

Start on small screen, center aligned text on extra-large screen and wider

  • Input
<text align="text-center-xl">Default (Start) align on SM (small screen), then Center aligned text on XL (extra-large) screen and wider.</text>
  • Output:

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




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 ?

This howto will show you how you can align your text. With ComboStrap, text alignment is only defined via the align attribute. There is three possible alignement: , ie left for a left-to-right...




Task Runner