Foundation
Text align
Change the alignment of text or elements. This utility also responsive prefixes.
.vads-u-text-align--left
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s veterans.
.vads-u-text-align--center
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s veterans.
.vads-u-text-align--right
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s veterans.
.vads-u-text-align--justify
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s veterans.
Responsive prefixes
Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.
To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s veterans.
<p class="vads-u-text-align--right tablet:vads-u-text-align--left desktop-lg:vads-u-text-align--center">To fulfill President Lincoln's promise “To care for him who shall have borne the battle, and for his widow, and his orphan” by serving and honoring the men and women who are America’s veterans.</p>
Example
<div class="vads-u-text-align--left desktop-lg:vads-u-text-align--center">
$xsmall-screen
--mobile
320px
$small-screen
--mobile-lg
481px
--tablet
640px
$medium-screen
--medium-screen
768px
$small-desktop-screen
--desktop
1024px
$large-screen
--desktop-lg
1201px
Read more about breakpoints.