Skip to content

Responsive Text Alignments

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
Back To Top