Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

Download Code View on GitHub

Text alignment

Align text using the text-align utility.

Format: .ds-u-text-align--[center|left|right]

Responsive format: .ds-u-[breakpoint]-text-align--[center|left|right]

.ds-u-text-align--left
We the People of the United States
.ds-u-text-align--center
We the People of the United States
.ds-u-text-align--right
We the People of the United States
Code snippet
<section class="example-list">
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-text-align--left</code>
    <div class="ds-u-text-align--left">We the People of the United States</div>
  </article>
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-text-align--center</code>
    <div class="ds-u-text-align--center">
      We the People of the United States
    </div>
  </article>
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-text-align--right</code>
    <div class="ds-u-text-align--right">We the People of the United States</div>
  </article>
</section>

Responsive text alignment

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

Code snippet