Since version 4.7 Total includes responsive text alignment classes that can be used in your modules or custom code. These allow you to alter the alignment at different breakpoints. As you will see the classes use the format text-{viewport-size-prefix}-{alignment} making it easy to use and remember later on.
Global Alignments (All window sizes)
- textleft
- textcenter
- text-right
Large Desktop: Viewport greater or equal to 1280px
- text-xl-center
- text-xl-right
- text-xl-left
Desktop: Viewport greater or equal to 960px
- text-lg-center
- text-lg-right
- text-lg-left
Tablets & Greater: Viewport greater or equal to 768px
- text-md-center
- text-md-right
- text-md-left
Phones: Viewport less or equal to 767px
- text-sm-center
- text-sm-right
- text-sm-left
Small Phones: Viewport less or equal to 479px
- text-xsm-center
- text-xsm-right
- text-xsm-left