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.