Utilities

HTML
Pug

<!-- Utilities: Text Colors -->
<p class="text-primary"><strong>Primary text.</strong> Lorem ipsum dolor...</p>
<p class="text-accent"><strong>Accent text.</strong> Lorem ipsum dolor...</p>
<p class="text-info"><strong>Info text.</strong> Lorem ipsum dolor...</p>
<p class="text-success"><strong>Success text.</strong> Lorem ipsum dolor...</p>
<p class="text-warning"><strong>Warning text.</strong> Lorem ipsum dolor...</p>
<p class="text-danger"><strong>Danger text.</strong> Lorem ipsum dolor...</p>
<p class="text-dark"><strong>Dark text.</strong> Lorem ipsum dolor...</p>
<p class="text-secondary"><strong>Secondary text.</strong> Lorem ipsum dolor...</p>
<p class="text-muted"><strong>Muted text.</strong> Lorem ipsum dolor...</p>
<p class="text-white"><strong>White text.</strong> Lorem ipsum dolor...</p>

//- Utilities: Text Colors
p.text-primary <strong>Primary text.</strong> Lorem ipsum dolor...
p.text-accent <strong>Accent text.</strong> Lorem ipsum dolor...
p.text-info <strong>Info text.</strong> Lorem ipsum dolor...
p.text-success <strong>Success text.</strong> Lorem ipsum dolor...
p.text-warning <strong>Warning text.</strong> Lorem ipsum dolor...
p.text-danger <strong>Danger text.</strong> Lorem ipsum dolor...
p.text-dark <strong>Dark text.</strong> Lorem ipsum dolor...
p.text-secondary <strong>Secondary text.</strong> Lorem ipsum dolor...
p.text-muted <strong>Muted text.</strong> Lorem ipsum dolor...
p.text-white <strong>White text.</strong> Lorem ipsum dolor...

HTML
Pug

<!-- Utilities: Background Colors -->
<div class="text-white bg-primary p-2"><strong>Primary BG.</strong> Lorem ipsum dolor...</div>
<div class="text-white bg-accent p-2"><strong>Accent BG.</strong> Lorem ipsum dolor...</div>
<div class="text-white bg-info p-2"><strong>Info BG.</strong> Lorem ipsum dolor...</div>
<div class="text-white bg-success p-2"><strong>Success BG.</strong> Lorem ipsum dolor...</div>
<div class="text-white bg-warning p-2"><strong>Warning BG.</strong> Lorem ipsum dolor...</div>
<div class="text-white bg-danger p-2"><strong>Danger BG.</strong> Lorem ipsum dolor...</div>
<div class="text-white bg-dark p-2"><strong>Dark BG.</strong> Lorem ipsum dolor...</div>
<div class="bg-secondary p-2"><strong>Secondary BG.</strong> Lorem ipsum dolor...</div>

//- Utilities: Background Colors
.text-white.bg-primary.p-2 <strong>Primary BG.</strong> Lorem ipsum dolor...
.text-white.bg-accent.p-2 <strong>Accenty BG.</strong> Lorem ipsum dolor...
.text-white.bg-info.p-2 <strong>Info BG.</strong> Lorem ipsum dolor...
.text-white.bg-success.p-2 <strong>Success BG.</strong> Lorem ipsum dolor...
.text-white.bg-warning.p-2 <strong>Warning BG.</strong> Lorem ipsum dolor...
.text-white.bg-danger.p-2 <strong>Danger BG.</strong> Lorem ipsum dolor...
.text-white.bg-dark.p-2 <strong>Dark BG.</strong> Lorem ipsum dolor...
.bg-secondary.p-2 <strong>Secondary BG.</strong> Lorem ipsum dolor...

HTML
Pug

<!-- Utilities: Background Faded Colors -->
<div class="text-primary bg-primary-faded p-3">Primary Faded BG</div>
<div class="text-accent bg-accent-faded p-3">Accent Faded BG</div>
<div class="text-info bg-info-faded p-3">Info Faded BG</div>
<div class="text-success bg-success-faded p-3">Success Faded BG</div>
<div class="text-warning bg-warning-faded p-3">Warning Faded BG</div>
<div class="text-danger bg-danger-faded p-3">Danger Faded BG</div>
<div class="text-dark bg-dark-faded p-3">Dark Faded BG</div>

//- Utilities: Background Faded Colors
.text-primary.bg-primary-faded.p-3 Primary Faded BG
.text-accent.bg-accent-faded.p-3 Accent Faded BG
.text-info.bg-info-faded.p-3 Info Faded BG
.text-success.bg-success-faded.p-3 Success Faded BG
.text-warning.bg-warning-faded.p-3 Warning Faded BG
.text-danger.bg-danger-faded.p-3 Danger Faded BG
.text-dark.bg-dark-faded.p-3 Dark Faded BG

Apply via set of CSS classes: opacity-25, opacity-50, opacity-60, opacity-70, opacity-75, opacity-80, opacity-90.

HTML
Pug

<!-- Utilities: Text Opacity -->
<p class="opacity-25">Opacity 25%</p>
<p class="opacity-50">Opacity 50%</p>
<p class="opacity-60">Opacity 60%</p>
<p class="opacity-70">Opacity 70%</p>
<p class="opacity-75">Opacity 75%</p>
<p class="opacity-80">Opacity 80%</p>
<p class="opacity-90">Opacity 90%</p>

//- Utilities: Text Opacity
p.opacity-25 Opacity 25%
p.opacity-50 Opacity 50%
p.opacity-60 Opacity 60%
p.opacity-70 Opacity 70%
p.opacity-75 Opacity 75%
p.opacity-80 Opacity 80%
p.opacity-90 Opacity 90%

Available for all grid tiers (xl, lg, md, sm). Read more here.

HTML
Pug

<!-- Utilities: Alignment -->
<div class="text-left">Left aligned text</div>
<div class="text-center">Center aligned text</div>
<div class="text-right">Right aligned text</div>

//- Utilities: Alignment
.text-left Left aligned text
.text-center Center aligned text
.text-right Right aligned text

Apply via set of CSS classes: border, border-top, border-right, border-bottom, border-left.

HTML
Pug

<!-- Utilities: Borders -->
<div class="bg-secondary border border-dark mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border-top border-dark mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border-right border-dark mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border-bottom border-dark mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border-left border-dark mb-3" style="width: 130px; height: 130px"></div>

//- Utilities: Borders
div(style="width: 130px; height: 130px").bg-secondary.border.border-dark.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border-top.border-dark.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border-right.border-dark.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border-bottom.border-dark.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border-left.border-dark.mb-3

To alter the color of the border add color modifier class to the base class border. The list of color modifier classes shown in code example below.

HTML
Pug

<!-- Utilities: Border Colors -->
<div class="bg-secondary border border-primary mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border border-accent mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border border-info mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border border-success mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border border-warning mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border border-danger mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border border-dark mb-3" style="width: 130px; height: 130px"></div>
<div class="bg-secondary border border-secondary mb-3" style="width: 130px; height: 130px"></div>

//- Utilities: Border Colors
div(style="width: 130px; height: 130px").bg-secondary.border.border-primary.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border.border-accent.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border.border-info.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border.border-success.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border.border-warning.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border.border-danger.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border.border-dark.mb-3
div(style="width: 130px; height: 130px").bg-secondary.border.border-secondary.mb-3

Text colors

Show code

Primary. Lorem ipsum dolor sit amet consectetur.
Accent. Lorem ipsum dolor sit amet consectetur.
Info. Lorem ipsum dolor sit amet consectetur.
Success. Lorem ipsum dolor sit amet consectetur.
Warning. Lorem ipsum dolor sit amet consectetur.
Danger. Lorem ipsum dolor sit amet consectetur.
Dark. Lorem ipsum dolor sit amet consectetur.
Body. Lorem ipsum dolor sit amet consectetur.
Black-50. Lorem ipsum dolor sit amet consectetur.
Muted. Lorem ipsum dolor sit amet consectetur.
White. Lorem ipsum dolor sit amet consectetur.

Background colors

Show code

Primary BG. Lorem ipsum dolor sit amet consectetur.
Accent BG. Lorem ipsum dolor sit amet consectetur.
Info BG. Lorem ipsum dolor sit amet consectetur.
Success BG. Lorem ipsum dolor sit amet consectetur.
Warning BG. Lorem ipsum dolor sit amet consectetur.
Danger BG. Lorem ipsum dolor sit amet consectetur.
Dark BG. Lorem ipsum dolor sit amet consectetur.
Secondary BG. Lorem ipsum dolor sit amet consectetur.

Background faded colors

Show code

.bg-primary-faded

.bg-accent-faded

.bg-info-faded

.bg-success-faded

.bg-warning-faded

.bg-danger-faded

.bg-dark-faded

Text opacity

Show code

Opacity 25%

Opacity 50%

Opacity 60%

Opacity 70%

Opacity 80%

Opacity 90%

Alignment

Show code

Left aligned element

Center aligned element

Right aligned element

Text utilities

This text should overflow the parent. Apply class .text-overflow.

Lowercased Text. Apply class .text-lowercase.

Uppercased Text. Apply class .text-uppercase.

CapiTaliZed text. Apply class .text-capitalize.

Praeterea iter est quasdam res quas ex communi.Apply class .text-truncate.

Bold text. Apply class .font-weight-bold.

Normal text. Apply class .font-weight-normal.

Italic text. Apply class .font-italic.

Borders

Show code

Border colors

Show code

Utilities

Code

Code

Code

Code

Code

Code

Code

Text colors

Background colors

Background faded colors

Text opacity

Alignment

Text utilities

Borders

Border colors