Simple – Content alignment
Key point: Alignment helper labels allow you to re-align text and content.

Horizontal alignment

Basic alignment

  • Fragment label: s-text-left
  • Fragment label: s-text-center
  • Fragment label: s-text-right
  • Fragment label: s-text-justify
  • Block label: s-text-left
  • Block label: s-text-center
  • Block label: s-text-right
  • Block label: s-text-justify

Responsive

There are also labels that support responsive displays using the desirable code of the breakpoint.

Add a custom fragment-label as follows:

[prefix]-[type]-[breakpoint]-[alignment] *see Legend

Example

To center align text on extra small and small, but left align on medium and bigger viewport sizes, add two labels:

  • Fragment label: s-text-center
  • Fragment label: s-text-md-left

*Legend:
prefix = Simple site prefix s
type = type of label text
breakpoint = breakpoint code xs, sm, md, lg and xl
alignment =  horizontal alignment (left, center, right, justify)

Vertical alignment

By default (no label) – the content is aligned to the top.
  • Fragment label: v-align-middle
  • Fragment label: v-align-bottom
  • Fragment label: v-align-justify

See in action

View content alignment demo.