Utilities

Shoelace provides a number of helpful utility classes that make prototyping easier.

Text Utilities

Text utilities are classes that can be applied to just about any element. The text inside will be formatted appropriately.

Class Example
text-success This is success text
text-info This is info text
text-warning This is warning text
text-danger This is danger text
text-muted This is muted text
text-small This is small text
text-bold This is bold text
text-italic This is italic text
text-left This is left-aligned text
text-center This is centered text
text-right This is right-aligned text
text-justify This is justified text
text-nowrap This is text that won’t wrap
text-lowercase This is lowercase text
text-uppercase This is uppercase text
text-capitalize This is capitalized text

Float Utilities

Float utilities are provided to easily float elements to the left or right. Just apply the float-left or float-right class to an element to float it left or right.

A clearfix utility is also available to clear floated elements. Just apply the clearfix class to the appropriate element.

Sizing Utilities

Sizing utilities can be used to set a relative width or height on any element. Just apply a width-* or height-* class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.

<div class="width-25">25%</div>
<div class="width-50">50%</div>
<div class="width-75">75%</div>
<div class="width-100">100%</div>

<div class="height-25">25%</div>
<div class="height-50">50%</div>
<div class="height-75">75%</div>
<div class="height-100">100%</div>
25%
50%
75%
100%
25%
50%
75%
100%

Spacing Utilities

Spacing utilities can be used to add or remove paddings and margins to any element. Just apply the desired class and the appropriate element will receive the respective padding/margin.

Class names are prefixed with padding- or margin- for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes:

padding-[none|small|medium|big]
margin-[none|small|medium|big]

Example:

<div class="padding-none margin-big">

To apply spacing to a specific side of an element, use one or more of the following classes:

padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
margin-[top|right|bottom|left|x|y]-[none|small|medium|big]

Example:

<div class="padding-left-medium margin-bottom-none">

You can also use margin-[x|y|xy]-auto to set automatic margins horizontally and/or vertically.