Skip to main content
U.S. flag

An official website of the United States government

CMS Design System

Text alignment

Align text using the text-align utility.

Format: ds-u-text-align--[VALUE]

Code snippet
<div class="ds-u-text-align--center">
  <code class="preview__label">ds-u-text-align--center</code>
<div class="ds-u-text-align--left">
  <code class="preview__label">ds-u-text-align--left</code>
<div class="ds-u-text-align--right">
  <code class="preview__label">ds-u-text-align--right</code>

Responsive text alignment

Use a breakpoint prefix to change the text alignment at specific breakpoints.

New tab
Code snippet
<div class="ds-u-sm-text-align--center ds-u-md-text-align--left ds-u-lg-text-align--right">
 We the People of the United States