Home ›
Documentation ›
Building Templates ›
CSS Utilities

CSS Utilities

The Web Theme contains a number of helper classes that can be useful in aligning and displaying content. These include classes for aligning elements, laying out grids, and adjusting the visibility of items.

Text Alignment

There are various utility classes that can be used to change the text alignment of elements.

Left Aligned... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

Center Aligned... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

Right Aligned... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

<!-- Left -->
<p class="text-left">Left Aligned... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>

<!-- Center -->
<p class="text-center">Center Aligned... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>

<!-- Right -->
<p class="text-right">Right Aligned... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>

CSS Classes

Class Name	Description
`.text-left`	Left align text.
`.text-center`	Center align text.
`.text-right`	Right align text.

Centered Blocks

Centered block of content on wider screens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Quamquam te quidem video minime esse deterritum.

<!-- `.block-center` will center the content block in wider contexts  -->
<p class="block-center">Centered block of content on wider screens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Quamquam te quidem video minime esse deterritum.</p>

CSS Classes

Class Name	Description
`.block-center`	Centers a block element, setting `margin-left/right: auto` and `max-width: 65rem`
`.block-center-wide`	Modifier to expand the max-width of the element to `90rem`

Floating Elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

Right Button Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Quamquam te quidem video minime esse deterritum.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam te quidem video minime esse deterritum. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.</p>

<p><a href="#" class="btn float-right">Right Button</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Quamquam te quidem video minime esse deterritum.</p>
</div>

CSS Classes

Class Name	Description
`.float-left`	Float element left.
`.float-right`	Float element right.

Flex and Grid

Vertical Alignment

To vertically align the elements of a row, you use the align-* classes.

Item 1
Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
Item 3

<!-- Top align -->
<div class="grid grid-md-3 align-start">
  <div>Item 1</div>
  <div>Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.</div>
  <div>Item 3</div>
</div>

Item 1
Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
Item 3

<!-- Center align -->
<div class="grid grid-md-3 align-center">
  <div>Item 1</div>
  <div>Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.</div>
  <div>Item 3</div>
</div>

Item 1
Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
Item 3

<!-- Bottom align -->
<div class="grid grid-md-3 align-end">
  <div>Item 1</div>
  <div>Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.</div>
  <div>Item 3</div>
</div>

CSS Classes

Class Name	Description
`.align-start`	Align items to top of row.
`.align-center`	Align items to middle of row.
`.align-end`	Align items to bottom of row.

Horizontal Alignment

When using a container with display:flex, you can use these classes to adjust the horizontal alignment of the children elements.

Start 1 Start 2 Start 3

Between 1 Between 2 Between 3

Center 1 Center 2 Center 3

Around 1 Around 2 Around 3

End 1 End 2 End 3

<!-- Left align -->
<p class="btn-group justify-start">
  <a href="#" class="btn">Start 1</a>
  <a href="#" class="btn">Start 2</a>
  <a href="#" class="btn">Start 3</a>
</p>

<!-- Add space between items -->
<p class="btn-group justify-between">
  <a href="#" class="btn btn-cta">Between 1</a>
  <a href="#" class="btn btn-cta">Between 2</a>
  <a href="#" class="btn btn-cta">Between 3</a>
</p>

<!-- Center items -->
<p class="btn-group justify-center">
  <a href="#" class="btn">Center 1</a>
  <a href="#" class="btn">Center 2</a>
  <a href="#" class="btn">Center 3</a>
</p>

<!-- Add space evenly around each item -->
<p class="btn-group justify-around">
  <a href="#" class="btn btn-cta">Around 1</a>
  <a href="#" class="btn btn-cta">Around 2</a>
  <a href="#" class="btn btn-cta">Around 3</a>
</p>

<!-- Right align -->
<p class="btn-group justify-end">
  <a href="#" class="btn">End 1</a>
  <a href="#" class="btn">End 2</a>
  <a href="#" class="btn">End 3</a>
</p>

CSS Classes

Class Name	Description
`.justify-start`	Left align. Same as `justify-content:start`.
`.justify-center`	Center align. Same as `justify-content:center`.
`.justify-end`	Right align. Same as `justify-content:end`.
`.justify-between`	Add any extra space between items. Same as `justify-content:space-between`.
`.justify-around`	Add any extra space evenly around items. Same as `justify-content:space-around`.

Cell Alignment

In addition to setting the alignment of the row, you can also set the horizontal and vertical alignment of each individual cell. This is done using the align-self-* and justify-self-* classes.

.align-self-start
Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
.align-self-end
Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
.align-self-center/.justify-self-center
Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
.justify-self-center
Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
.justify-self-end

<div class="grid grid-md-3">
  <!-- Top align -->
  <div class="align-self-start">.align-self-start</div>
  <div>Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.</div>

  <!-- Bottom align -->
  <div class="align-self-end">.align-self-end</div>

  <div>Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.</div>

  <!-- Center align -->
  <div class="justify-self-center align-self-center">.align-self-center/.justify-self-center</div>

  <div>Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.</div>

  <!-- Left align -->
  <div class="justify-self-start">.justify-self-start</div>

  <div>Ut pulsi recurrant? Quod si ita sit, cur opera philosophiae sit danda nescio. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.</div>

  <!-- Right align -->
  <div class="justify-self-end">.justify-self-end</div>
</div>

CSS Classes

Class Name	Description
`.align-self-start`	Vertically align item to top of row.
`.align-self-center`	Vertically align item to middle of row.
`.align-self-end`	Vertically align item to bottom of row.
`.justify-self-start`	Horizontally align item to start of column.
`.justify-self-center`	Horizontally align item to center of column.
`.justify-self-end`	Horizontally align item to end of column.

Visibility

There are multiple classes that can be used to alter the visibility of an object. Which one you use will be affected by whether you want the element to still take up space in the document flow and whether you want it to be accessible to screen readers.

  Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

<ul class="grid grid-sm-2 grid-md-5">
  <li>Item 1</li>

  <!-- Still takes up space, but is invisible -->
  <li class="invisible">Item 2</li>

  <li>Item 3</li>

  <!-- Removed from document flow -->
  <li class="hidden">Item 4</li>

  <li>Item 5</li>

  <!-- Removed from the visual flow, but still accessible to screen readers -->
  <li class="visually-hidden">Item 6</li>

  <li>Item 7</li>
</ul>

Class Name	Description
`.hidden`	Completely hides (`display:none`) element, and removes from document flow.
`.visually-hidden`	Hides element from being visible on screen. The element takes up no visual space in the document flow, but is still accessible by screen readers.
`.invisible`	Removes visibility of element (`visibility:hidden`), but still takes up space in document layout. Similar to setting the opacity of the element to `0`.