Align and Size Text with Ionic v3 CSS Utilities
The Ionic framework provides several built-in CSS Utilities or directives that you can leverage when styling your application. Instead of writing your own CSS for each component's text alignment we can use the prebuilt ones.
Instructor: [00:01] in this sample ionic application, I have two header tags and a paragraph. For the first header, I want this text to be centered, so I add the Text Centered directive to it. For the second header, I want this to be aligned to the right, so I will add the Text Right to the tag. Finally, for the paragraph, I want this text to be justified.
[00:24] This is done by adding a Text Justified directive. When I save the file and the app is rebuilt, we will see my text now aligned correctly. Another modification that is quite common is the adjustment of the case of the text. Ionic also provides directive for changing the text case to all uppercase, which I'll add to the first header.
[00:47] I want the second header to be all lowercase, so I'll add the Text Lowercase to that tag. Saving again, we can see the changes. Ionic also includes a directive to capitalize the text by using Text Capitalize. I'll change the second header to use this. Each of the modifiers can be further controlled by adding responsive break points to the directive.
[01:11] If we want the first header tag to only be centered when the minimum width is 576 pixels, I can change the directive to Text-Sm-Center. Now, only when that breakpoint is met will the directive be applied...