PostBoot

Web app prototyping library based on Bootstrap framework.

Installation

Manually

Download package and unpack it or use following commands:

wget -O https://github.com/tarkhov/postboot/releases/download/v1.0.0-rc4/postboot-1.0.0-rc4.zip
unzip postboot-1.0.0-rc4.zip

NodeJS

npm install postboot@1.0.0-rc4

Usage

Local

<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/postboot.min.css"/>

<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/postboot.min.js"></script>

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/tarkhov/postboot/v1.0.0-rc4/dist/css/postboot.min.css"/>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/tarkhov/postboot/v1.0.0-rc4/dist/js/postboot.min.js"></script>

Requirements

New

CSS

File Requirement
postboot.css bootstrap.css
postboot-grid.css bootstrap-grid.css
postboot-light.css bootstrap.css

List of css components that requires postboot.js:

JS

File Requirement
postboot.js bootstrap.js
dropdown-hover.js dropdown.js
dropdown-mega.js dropdown.js
scrollspy-tree.js scrollspy.js

Background

Custom

Indigo

Orange

Pink

Purple

Teal

Opacity

Primary

Secondary

Success

Info

Warning

Danger

Light

Dark

Black

Indigo

Orange

Pink

Purple

Teal

White

State

New

Primary

Secondary

Success

Info

Warning

Danger

Light

Dark

Indigo

Orange

Pink

Purple

Teal

Hover

Primary

Secondary

Success

Info

Warning

Danger

Dark

Black

Indigo

Orange

Pink

Purple

Teal

Light

White

Hover opacity

Primary

Secondary

Success

Info

Warning

Danger

Light

Dark

Black

Indigo

Orange

Pink

Purple

Teal

White

Contain

Cover

Striped

Striped

Badge

Custom

Indigo
Orange
Pink
Purple
Teal
White

Opacity

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Black
Indigo
Orange
Pink
Purple
Teal
White

Border

Custom

Indigo
Orange
Pink
Purple
Teal

Opacity

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Black
Indigo
Orange
Pink
Purple
Teal
White

Hover

Primary
Secondary
Success
Info
Warning
Danger
Dark
Black
Indigo
Orange
Pink
Purple
Teal
Light
White

Hover opacity

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Black
Indigo
Orange
Pink
Purple
Teal
White

Style

Dashed
Dotted
Double
Solid

Widths

Responsive border widths

New
<!-- Source -->
<p class="border-sm-0">0px</p>
<p class="border-top-sm-0">0px</p>
<p class="border-right-sm-0">0px</p>
<p class="border-bottom-sm-0">0px</p>
<p class="border-left-sm-0">0px</p>

<p class="border-sm-1">1px</p>
<p class="border-top-sm-1">1px</p>
<p class="border-right-sm-1">1px</p>
<p class="border-bottom-sm-1">1px</p>
<p class="border-left-sm-1">1px</p>

<p class="border-sm-2">2px</p>
<p class="border-top-sm-2">2px</p>
<p class="border-right-sm-2">2px</p>
<p class="border-bottom-sm-2">2px</p>
<p class="border-left-sm-2">2px</p>

<p class="border-sm-3">3px</p>
<p class="border-top-sm-3">3px</p>
<p class="border-right-sm-3">3px</p>
<p class="border-bottom-sm-3">3px</p>
<p class="border-left-sm-3">3px</p>

<p class="border-sm-4">4px</p>
<p class="border-top-sm-4">4px</p>
<p class="border-right-sm-4">4px</p>
<p class="border-bottom-sm-4">4px</p>
<p class="border-left-sm-4">4px</p>

<p class="border-sm-5">5px</p>
<p class="border-top-sm-5">5px</p>
<p class="border-right-sm-5">5px</p>
<p class="border-bottom-sm-5">5px</p>
<p class="border-left-sm-5">5px</p>

<p class="border-md-0">0px</p>
<p class="border-top-md-0">0px</p>
<p class="border-right-md-0">0px</p>
<p class="border-bottom-md-0">0px</p>
<p class="border-left-md-0">0px</p>

<p class="border-md-1">1px</p>
<p class="border-top-md-1">1px</p>
<p class="border-right-md-1">1px</p>
<p class="border-bottom-md-1">1px</p>
<p class="border-left-md-1">1px</p>

<p class="border-md-2">2px</p>
<p class="border-top-md-2">2px</p>
<p class="border-right-md-2">2px</p>
<p class="border-bottom-md-2">2px</p>
<p class="border-left-md-2">2px</p>

<p class="border-md-3">3px</p>
<p class="border-top-md-3">3px</p>
<p class="border-right-md-3">3px</p>
<p class="border-bottom-md-3">3px</p>
<p class="border-left-md-3">3px</p>

<p class="border-md-4">4px</p>
<p class="border-top-md-4">4px</p>
<p class="border-right-md-4">4px</p>
<p class="border-bottom-md-4">4px</p>
<p class="border-left-md-4">4px</p>

<p class="border-md-5">5px</p>
<p class="border-top-md-5">5px</p>
<p class="border-right-md-5">5px</p>
<p class="border-bottom-md-5">5px</p>
<p class="border-left-md-5">5px</p>

<p class="border-lg-0">0px</p>
<p class="border-top-lg-0">0px</p>
<p class="border-right-lg-0">0px</p>
<p class="border-bottom-lg-0">0px</p>
<p class="border-left-lg-0">0px</p>

<p class="border-lg-1">1px</p>
<p class="border-top-lg-1">1px</p>
<p class="border-right-lg-1">1px</p>
<p class="border-bottom-lg-1">1px</p>
<p class="border-left-lg-1">1px</p>

<p class="border-lg-2">2px</p>
<p class="border-top-lg-2">2px</p>
<p class="border-right-lg-2">2px</p>
<p class="border-bottom-lg-2">2px</p>
<p class="border-left-lg-2">2px</p>

<p class="border-lg-3">3px</p>
<p class="border-top-lg-3">3px</p>
<p class="border-right-lg-3">3px</p>
<p class="border-bottom-lg-3">3px</p>
<p class="border-left-lg-3">3px</p>

<p class="border-lg-4">4px</p>
<p class="border-top-lg-4">4px</p>
<p class="border-right-lg-4">4px</p>
<p class="border-bottom-lg-4">4px</p>
<p class="border-left-lg-4">4px</p>

<p class="border-lg-5">5px</p>
<p class="border-top-lg-5">5px</p>
<p class="border-right-lg-5">5px</p>
<p class="border-bottom-lg-5">5px</p>
<p class="border-left-lg-5">5px</p>

<p class="border-xl-0">0px</p>
<p class="border-top-xl-0">0px</p>
<p class="border-right-xl-0">0px</p>
<p class="border-bottom-xl-0">0px</p>
<p class="border-left-xl-0">0px</p>

<p class="border-xl-1">1px</p>
<p class="border-top-xl-1">1px</p>
<p class="border-right-xl-1">1px</p>
<p class="border-bottom-xl-1">1px</p>
<p class="border-left-xl-1">1px</p>

<p class="border-xl-2">2px</p>
<p class="border-top-xl-2">2px</p>
<p class="border-right-xl-2">2px</p>
<p class="border-bottom-xl-2">2px</p>
<p class="border-left-xl-2">2px</p>

<p class="border-xl-3">3px</p>
<p class="border-top-xl-3">3px</p>
<p class="border-right-xl-3">3px</p>
<p class="border-bottom-xl-3">3px</p>
<p class="border-left-xl-3">3px</p>

<p class="border-xl-4">4px</p>
<p class="border-top-xl-4">4px</p>
<p class="border-right-xl-4">4px</p>
<p class="border-bottom-xl-4">4px</p>
<p class="border-left-xl-4">4px</p>

<p class="border-xl-5">5px</p>
<p class="border-top-xl-5">5px</p>
<p class="border-right-xl-5">5px</p>
<p class="border-bottom-xl-5">5px</p>
<p class="border-left-xl-5">5px</p>

Button

Custom

Outline

Hover

Active

New

3D

Opacity

State

Sizes

New

Responsive button sizes

New
<!-- Source -->
<button class="btn btn-secondary btn-sm-1" type="button">Button</button>
<button class="btn btn-secondary btn-sm-2" type="button">Button</button>
<button class="btn btn-secondary btn-sm-3" type="button">Button</button>
<button class="btn btn-secondary btn-sm-4" type="button">Button</button>
<button class="btn btn-secondary btn-sm-5" type="button">Button</button>

<button class="btn btn-secondary btn-md-1" type="button">Button</button>
<button class="btn btn-secondary btn-md-2" type="button">Button</button>
<button class="btn btn-secondary btn-md-3" type="button">Button</button>
<button class="btn btn-secondary btn-md-4" type="button">Button</button>
<button class="btn btn-secondary btn-md-5" type="button">Button</button>

<button class="btn btn-secondary btn-lg-1" type="button">Button</button>
<button class="btn btn-secondary btn-lg-2" type="button">Button</button>
<button class="btn btn-secondary btn-lg-3" type="button">Button</button>
<button class="btn btn-secondary btn-lg-4" type="button">Button</button>
<button class="btn btn-secondary btn-lg-5" type="button">Button</button>

<button class="btn btn-secondary btn-xl-1" type="button">Button</button>
<button class="btn btn-secondary btn-xl-2" type="button">Button</button>
<button class="btn btn-secondary btn-xl-3" type="button">Button</button>
<button class="btn btn-secondary btn-xl-4" type="button">Button</button>
<button class="btn btn-secondary btn-xl-5" type="button">Button</button>

Circle

Pill

Responsive button block

New
<!-- Source -->
<button class="btn btn-secondary btn-sm-block" type="button">Button</button>
<button class="btn btn-secondary btn-md-block" type="button">Button</button>
<button class="btn btn-secondary btn-lg-block" type="button">Button</button>
<button class="btn btn-secondary btn-xl-block" type="button">Button</button>

Card

Image position

Left image

Example text

Right image

Example text

Responsive image

<!-- Source -->
<img class="card-img-sm-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-sm-top-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-sm-bottom-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-sm-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-sm-top-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-sm-bottom-left" src="/postboot/assets/img/thumbnail.jpg"/>

<img class="card-img-md-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-md-top-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-md-bottom-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-md-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-md-top-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-md-bottom-left" src="/postboot/assets/img/thumbnail.jpg"/>

<img class="card-img-lg-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-lg-top-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-lg-bottom-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-lg-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-lg-top-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-lg-bottom-left" src="/postboot/assets/img/thumbnail.jpg"/>

<img class="card-img-xl-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-xl-top-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-xl-bottom-right" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-xl-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-xl-top-left" src="/postboot/assets/img/thumbnail.jpg"/>
<img class="card-img-xl-bottom-left" src="/postboot/assets/img/thumbnail.jpg"/>

Pill

Pill

Example text

Size

New

Example title

Example text

Example title

Example text

Example title

Example text

Responsive card sizes

New
<!-- Source -->
<div class="card card-sm-1"></div>
<div class="card card-sm-2"></div>
<div class="card card-sm-3"></div>

<div class="card card-md-1"></div>
<div class="card card-md-2"></div>
<div class="card card-md-3"></div>

<div class="card card-lg-1"></div>
<div class="card card-lg-2"></div>
<div class="card card-lg-3"></div>

<div class="card card-xl-1"></div>
<div class="card card-xl-2"></div>
<div class="card card-xl-3"></div>

Collapse

Horizontal

New
Collapse

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Flex

Align

New
<!-- Source -->
<div class="flex-center"></div>
<div class="flex-y-center"></div>
<div class="flex-x-center"></div>
<div class="flex-left"></div>
<div class="flex-right"></div>
<div class="flex-between"></div>
<div class="flex-around"></div>
<div class="flex-top"></div>
<div class="flex-bottom"></div>
<div class="flex-baseline"></div>
<div class="flex-stretch"></div>

<div class="flex-align-between"></div>
<div class="flex-align-around"></div>
<div class="flex-align-start"></div>
<div class="flex-align-end"></div>
<div class="flex-align-center"></div>
<div class="flex-align-stretch"></div>

Responsive flex align

New
<!-- Source -->
<div class="flex-sm-center"></div>
<div class="flex-y-sm-center"></div>
<div class="flex-x-sm-center"></div>
<div class="flex-sm-left"></div>
<div class="flex-sm-right"></div>
<div class="flex-sm-between"></div>
<div class="flex-sm-around"></div>
<div class="flex-sm-top"></div>
<div class="flex-sm-bottom"></div>
<div class="flex-sm-baseline"></div>
<div class="flex-sm-stretch"></div>

<div class="flex-align-sm-between"></div>
<div class="flex-align-sm-around"></div>
<div class="flex-align-sm-start"></div>
<div class="flex-align-sm-end"></div>
<div class="flex-align-sm-center"></div>
<div class="flex-align-sm-stretch"></div>

<div class="flex-md-center"></div>
<div class="flex-y-md-center"></div>
<div class="flex-x-md-center"></div>
<div class="flex-md-left"></div>
<div class="flex-md-right"></div>
<div class="flex-md-between"></div>
<div class="flex-md-around"></div>
<div class="flex-md-top"></div>
<div class="flex-md-bottom"></div>
<div class="flex-md-baseline"></div>
<div class="flex-md-stretch"></div>

<div class="flex-align-md-between"></div>
<div class="flex-align-md-around"></div>
<div class="flex-align-md-start"></div>
<div class="flex-align-md-end"></div>
<div class="flex-align-md-center"></div>
<div class="flex-align-md-stretch"></div>

<div class="flex-lg-center"></div>
<div class="flex-y-lg-center"></div>
<div class="flex-x-lg-center"></div>
<div class="flex-lg-left"></div>
<div class="flex-lg-right"></div>
<div class="flex-lg-between"></div>
<div class="flex-lg-around"></div>
<div class="flex-lg-top"></div>
<div class="flex-lg-bottom"></div>
<div class="flex-lg-baseline"></div>
<div class="flex-lg-stretch"></div>

<div class="flex-align-lg-between"></div>
<div class="flex-align-lg-around"></div>
<div class="flex-align-lg-start"></div>
<div class="flex-align-lg-end"></div>
<div class="flex-align-lg-center"></div>
<div class="flex-align-lg-stretch"></div>

<div class="flex-xl-center"></div>
<div class="flex-y-xl-center"></div>
<div class="flex-x-xl-center"></div>
<div class="flex-xl-left"></div>
<div class="flex-xl-right"></div>
<div class="flex-xl-between"></div>
<div class="flex-xl-around"></div>
<div class="flex-xl-top"></div>
<div class="flex-xl-bottom"></div>
<div class="flex-xl-baseline"></div>
<div class="flex-xl-stretch"></div>

<div class="flex-align-xl-between"></div>
<div class="flex-align-xl-around"></div>
<div class="flex-align-xl-start"></div>
<div class="flex-align-xl-end"></div>
<div class="flex-align-xl-center"></div>
<div class="flex-align-xl-stretch"></div>

Font

Font sizes

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

Font size 8

Font size 9

Font size 10

Font size 11

Font size 12

Responsive font sizes

<!-- Source -->
<p class="fs-sm-1"></p>
<p class="fs-sm-2"></p>
<p class="fs-sm-3"></p>
<p class="fs-sm-4"></p>
<p class="fs-sm-5"></p>
<p class="fs-sm-6"></p>
<p class="fs-sm-7"></p>
<p class="fs-sm-8"></p>
<p class="fs-sm-9"></p>
<p class="fs-sm-10"></p>
<p class="fs-sm-11"></p>
<p class="fs-sm-12"></p>

<p class="fs-md-1"></p>
<p class="fs-md-2"></p>
<p class="fs-md-3"></p>
<p class="fs-md-4"></p>
<p class="fs-md-5"></p>
<p class="fs-md-6"></p>
<p class="fs-md-7"></p>
<p class="fs-md-8"></p>
<p class="fs-md-9"></p>
<p class="fs-md-10"></p>
<p class="fs-md-11"></p>
<p class="fs-md-12"></p>

<p class="fs-lg-1"></p>
<p class="fs-lg-2"></p>
<p class="fs-lg-3"></p>
<p class="fs-lg-4"></p>
<p class="fs-lg-5"></p>
<p class="fs-lg-6"></p>
<p class="fs-lg-7"></p>
<p class="fs-lg-8"></p>
<p class="fs-lg-9"></p>
<p class="fs-lg-10"></p>
<p class="fs-lg-11"></p>
<p class="fs-lg-12"></p>

<p class="fs-xl-1"></p>
<p class="fs-xl-2"></p>
<p class="fs-xl-3"></p>
<p class="fs-xl-4"></p>
<p class="fs-xl-5"></p>
<p class="fs-xl-6"></p>
<p class="fs-xl-7"></p>
<p class="fs-xl-8"></p>
<p class="fs-xl-9"></p>
<p class="fs-xl-10"></p>
<p class="fs-xl-11"></p>
<p class="fs-xl-12"></p>

Font weights

Thin

Extra light

Light

Normal

Medium

Semi bold

Bold

Extra bold

Black

Responsive font weights

<!-- Source -->
<p class="fw-sm-100"></p>
<p class="fw-sm-200"></p>
<p class="fw-sm-300"></p>
<p class="fw-sm-400"></p>
<p class="fw-sm-500"></p>
<p class="fw-sm-600"></p>
<p class="fw-sm-700"></p>
<p class="fw-sm-800"></p>
<p class="fw-sm-900"></p>

<p class="fw-md-100"></p>
<p class="fw-md-200"></p>
<p class="fw-md-300"></p>
<p class="fw-md-400"></p>
<p class="fw-md-500"></p>
<p class="fw-md-600"></p>
<p class="fw-md-700"></p>
<p class="fw-md-800"></p>
<p class="fw-md-900"></p>

<p class="fw-lg-100"></p>
<p class="fw-lg-200"></p>
<p class="fw-lg-300"></p>
<p class="fw-lg-400"></p>
<p class="fw-lg-500"></p>
<p class="fw-lg-600"></p>
<p class="fw-lg-700"></p>
<p class="fw-lg-800"></p>
<p class="fw-lg-900"></p>

<p class="fw-xl-100"></p>
<p class="fw-xl-200"></p>
<p class="fw-xl-300"></p>
<p class="fw-xl-400"></p>
<p class="fw-xl-500"></p>
<p class="fw-xl-600"></p>
<p class="fw-xl-700"></p>
<p class="fw-xl-800"></p>
<p class="fw-xl-900"></p>

Form

Dark

New

Color

Opacity

Material

New

Input sizes

New

Responsive input sizes

New
<!-- Source -->
<input class="form-control input-sm-1" type="text" placeholder="1"/>
<input class="form-control input-sm-2" type="text" placeholder="2"/>
<input class="form-control input-sm-3" type="text" placeholder="3"/>
<input class="form-control input-sm-4" type="text" placeholder="4"/>

<input class="form-control input-md-1" type="text" placeholder="1"/>
<input class="form-control input-md-2" type="text" placeholder="2"/>
<input class="form-control input-md-3" type="text" placeholder="3"/>
<input class="form-control input-md-4" type="text" placeholder="4"/>

<input class="form-control input-lg-1" type="text" placeholder="1"/>
<input class="form-control input-lg-2" type="text" placeholder="2"/>
<input class="form-control input-lg-3" type="text" placeholder="3"/>
<input class="form-control input-lg-4" type="text" placeholder="4"/>

<input class="form-control input-xl-1" type="text" placeholder="1"/>
<input class="form-control input-xl-2" type="text" placeholder="2"/>
<input class="form-control input-xl-3" type="text" placeholder="3"/>
<input class="form-control input-xl-4" type="text" placeholder="4"/>

Grid

Container

<!-- Source -->
<div class="container-fluid container-md"></div>
<div class="container-fluid container-lg"></div>
<div class="container-fluid container-xl"></div>

Size

New
<!-- Source -->
<div class="container container-1"></div>
<div class="container container-2"></div>
<div class="container container-3"></div>

Row size

New

Column size

New

Gutter spacing

New
<!-- Source -->
<div class="m-gutter"></div>
<div class="mx-gutter"></div>
<div class="my-gutter"></div>
<div class="mt-gutter"></div>
<div class="mr-gutter"></div>
<div class="mb-gutter"></div>
<div class="ml-gutter"></div>

<div class="p-gutter"></div>
<div class="px-gutter"></div>
<div class="py-gutter"></div>
<div class="pt-gutter"></div>
<div class="pr-gutter"></div>
<div class="pb-gutter"></div>
<div class="pl-gutter"></div>

<div class="m-gutter-1"></div>
<div class="mx-gutter-1"></div>
<div class="my-gutter-1"></div>
<div class="mt-gutter-1"></div>
<div class="mr-gutter-1"></div>
<div class="mb-gutter-1"></div>
<div class="ml-gutter-1"></div>

<div class="p-gutter-1"></div>
<div class="px-gutter-1"></div>
<div class="py-gutter-1"></div>
<div class="pt-gutter-1"></div>
<div class="pr-gutter-1"></div>
<div class="pb-gutter-1"></div>
<div class="pl-gutter-1"></div>

<div class="m-gutter-2"></div>
<div class="mx-gutter-2"></div>
<div class="my-gutter-2"></div>
<div class="mt-gutter-2"></div>
<div class="mr-gutter-2"></div>
<div class="mb-gutter-2"></div>
<div class="ml-gutter-2"></div>

<div class="p-gutter-2"></div>
<div class="px-gutter-2"></div>
<div class="py-gutter-2"></div>
<div class="pt-gutter-2"></div>
<div class="pr-gutter-2"></div>
<div class="pb-gutter-2"></div>
<div class="pl-gutter-2"></div>

<div class="m-gutter-3"></div>
<div class="mx-gutter-3"></div>
<div class="my-gutter-3"></div>
<div class="mt-gutter-3"></div>
<div class="mr-gutter-3"></div>
<div class="mb-gutter-3"></div>
<div class="ml-gutter-3"></div>

<div class="p-gutter-3"></div>
<div class="px-gutter-3"></div>
<div class="py-gutter-3"></div>
<div class="pt-gutter-3"></div>
<div class="pr-gutter-3"></div>
<div class="pb-gutter-3"></div>
<div class="pl-gutter-3"></div>

Gutter spacing responsive

New
<!-- Source -->
<div class="m-gutter-sm"></div>
<div class="mx-gutter-sm"></div>
<div class="my-gutter-sm"></div>
<div class="mt-gutter-sm"></div>
<div class="mr-gutter-sm"></div>
<div class="mb-gutter-sm"></div>
<div class="ml-gutter-sm"></div>

<div class="p-sm-gutter-sm"></div>
<div class="px-sm-gutter-sm"></div>
<div class="py-sm-gutter-sm"></div>
<div class="pt-sm-gutter-sm"></div>
<div class="pr-sm-gutter-sm"></div>
<div class="pb-sm-gutter-sm"></div>
<div class="pl-gutter-sm"></div>

<div class="m-gutter-sm-1"></div>
<div class="mx-gutter-sm-1"></div>
<div class="my-gutter-sm-1"></div>
<div class="mt-gutter-sm-1"></div>
<div class="mr-gutter-sm-1"></div>
<div class="mb-gutter-sm-1"></div>
<div class="ml-gutter-sm-1"></div>

<div class="p-gutter-sm-1"></div>
<div class="px-gutter-sm-1"></div>
<div class="py-gutter-sm-1"></div>
<div class="pt-gutter-sm-1"></div>
<div class="pr-gutter-sm-1"></div>
<div class="pb-gutter-sm-1"></div>
<div class="pl-gutter-sm-1"></div>

<div class="m-gutter-sm-2"></div>
<div class="mx-gutter-sm-2"></div>
<div class="my-gutter-sm-2"></div>
<div class="mt-gutter-sm-2"></div>
<div class="mr-gutter-sm-2"></div>
<div class="mb-gutter-sm-2"></div>
<div class="ml-gutter-sm-2"></div>

<div class="p-gutter-sm-2"></div>
<div class="px-gutter-sm-2"></div>
<div class="py-gutter-sm-2"></div>
<div class="pt-gutter-sm-2"></div>
<div class="pr-gutter-sm-2"></div>
<div class="pb-gutter-sm-2"></div>
<div class="pl-gutter-sm-2"></div>

<div class="m-gutter-sm-3"></div>
<div class="mx-gutter-sm-3"></div>
<div class="my-gutter-sm-3"></div>
<div class="mt-gutter-sm-3"></div>
<div class="mr-gutter-sm-3"></div>
<div class="mb-gutter-sm-3"></div>
<div class="ml-gutter-sm-3"></div>

<div class="p-gutter-sm-3"></div>
<div class="px-gutter-sm-3"></div>
<div class="py-gutter-sm-3"></div>
<div class="pt-gutter-sm-3"></div>
<div class="pr-gutter-sm-3"></div>
<div class="pb-gutter-sm-3"></div>
<div class="pl-gutter-sm-3"></div>

<div class="m-gutter-md"></div>
<div class="mx-gutter-md"></div>
<div class="my-gutter-md"></div>
<div class="mt-gutter-md"></div>
<div class="mr-gutter-md"></div>
<div class="mb-gutter-md"></div>
<div class="ml-gutter-md"></div>

<div class="p-md-gutter-md"></div>
<div class="px-md-gutter-md"></div>
<div class="py-md-gutter-md"></div>
<div class="pt-md-gutter-md"></div>
<div class="pr-md-gutter-md"></div>
<div class="pb-md-gutter-md"></div>
<div class="pl-gutter-md"></div>

<div class="m-gutter-md-1"></div>
<div class="mx-gutter-md-1"></div>
<div class="my-gutter-md-1"></div>
<div class="mt-gutter-md-1"></div>
<div class="mr-gutter-md-1"></div>
<div class="mb-gutter-md-1"></div>
<div class="ml-gutter-md-1"></div>

<div class="p-gutter-md-1"></div>
<div class="px-gutter-md-1"></div>
<div class="py-gutter-md-1"></div>
<div class="pt-gutter-md-1"></div>
<div class="pr-gutter-md-1"></div>
<div class="pb-gutter-md-1"></div>
<div class="pl-gutter-md-1"></div>

<div class="m-gutter-md-2"></div>
<div class="mx-gutter-md-2"></div>
<div class="my-gutter-md-2"></div>
<div class="mt-gutter-md-2"></div>
<div class="mr-gutter-md-2"></div>
<div class="mb-gutter-md-2"></div>
<div class="ml-gutter-md-2"></div>

<div class="p-gutter-md-2"></div>
<div class="px-gutter-md-2"></div>
<div class="py-gutter-md-2"></div>
<div class="pt-gutter-md-2"></div>
<div class="pr-gutter-md-2"></div>
<div class="pb-gutter-md-2"></div>
<div class="pl-gutter-md-2"></div>

<div class="m-gutter-md-3"></div>
<div class="mx-gutter-md-3"></div>
<div class="my-gutter-md-3"></div>
<div class="mt-gutter-md-3"></div>
<div class="mr-gutter-md-3"></div>
<div class="mb-gutter-md-3"></div>
<div class="ml-gutter-md-3"></div>

<div class="p-gutter-md-3"></div>
<div class="px-gutter-md-3"></div>
<div class="py-gutter-md-3"></div>
<div class="pt-gutter-md-3"></div>
<div class="pr-gutter-md-3"></div>
<div class="pb-gutter-md-3"></div>
<div class="pl-gutter-md-3"></div>

<div class="m-gutter-lg"></div>
<div class="mx-gutter-lg"></div>
<div class="my-gutter-lg"></div>
<div class="mt-gutter-lg"></div>
<div class="mr-gutter-lg"></div>
<div class="mb-gutter-lg"></div>
<div class="ml-gutter-lg"></div>

<div class="p-lg-gutter-lg"></div>
<div class="px-lg-gutter-lg"></div>
<div class="py-lg-gutter-lg"></div>
<div class="pt-lg-gutter-lg"></div>
<div class="pr-lg-gutter-lg"></div>
<div class="pb-lg-gutter-lg"></div>
<div class="pl-gutter-lg"></div>

<div class="m-gutter-lg-1"></div>
<div class="mx-gutter-lg-1"></div>
<div class="my-gutter-lg-1"></div>
<div class="mt-gutter-lg-1"></div>
<div class="mr-gutter-lg-1"></div>
<div class="mb-gutter-lg-1"></div>
<div class="ml-gutter-lg-1"></div>

<div class="p-gutter-lg-1"></div>
<div class="px-gutter-lg-1"></div>
<div class="py-gutter-lg-1"></div>
<div class="pt-gutter-lg-1"></div>
<div class="pr-gutter-lg-1"></div>
<div class="pb-gutter-lg-1"></div>
<div class="pl-gutter-lg-1"></div>

<div class="m-gutter-lg-2"></div>
<div class="mx-gutter-lg-2"></div>
<div class="my-gutter-lg-2"></div>
<div class="mt-gutter-lg-2"></div>
<div class="mr-gutter-lg-2"></div>
<div class="mb-gutter-lg-2"></div>
<div class="ml-gutter-lg-2"></div>

<div class="p-gutter-lg-2"></div>
<div class="px-gutter-lg-2"></div>
<div class="py-gutter-lg-2"></div>
<div class="pt-gutter-lg-2"></div>
<div class="pr-gutter-lg-2"></div>
<div class="pb-gutter-lg-2"></div>
<div class="pl-gutter-lg-2"></div>

<div class="m-gutter-lg-3"></div>
<div class="mx-gutter-lg-3"></div>
<div class="my-gutter-lg-3"></div>
<div class="mt-gutter-lg-3"></div>
<div class="mr-gutter-lg-3"></div>
<div class="mb-gutter-lg-3"></div>
<div class="ml-gutter-lg-3"></div>

<div class="p-gutter-lg-3"></div>
<div class="px-gutter-lg-3"></div>
<div class="py-gutter-lg-3"></div>
<div class="pt-gutter-lg-3"></div>
<div class="pr-gutter-lg-3"></div>
<div class="pb-gutter-lg-3"></div>
<div class="pl-gutter-lg-3"></div>

<div class="m-gutter-xl"></div>
<div class="mx-gutter-xl"></div>
<div class="my-gutter-xl"></div>
<div class="mt-gutter-xl"></div>
<div class="mr-gutter-xl"></div>
<div class="mb-gutter-xl"></div>
<div class="ml-gutter-xl"></div>

<div class="p-xl-gutter-xl"></div>
<div class="px-xl-gutter-xl"></div>
<div class="py-xl-gutter-xl"></div>
<div class="pt-xl-gutter-xl"></div>
<div class="pr-xl-gutter-xl"></div>
<div class="pb-xl-gutter-xl"></div>
<div class="pl-gutter-xl"></div>

<div class="m-gutter-xl-1"></div>
<div class="mx-gutter-xl-1"></div>
<div class="my-gutter-xl-1"></div>
<div class="mt-gutter-xl-1"></div>
<div class="mr-gutter-xl-1"></div>
<div class="mb-gutter-xl-1"></div>
<div class="ml-gutter-xl-1"></div>

<div class="p-gutter-xl-1"></div>
<div class="px-gutter-xl-1"></div>
<div class="py-gutter-xl-1"></div>
<div class="pt-gutter-xl-1"></div>
<div class="pr-gutter-xl-1"></div>
<div class="pb-gutter-xl-1"></div>
<div class="pl-gutter-xl-1"></div>

<div class="m-gutter-xl-2"></div>
<div class="mx-gutter-xl-2"></div>
<div class="my-gutter-xl-2"></div>
<div class="mt-gutter-xl-2"></div>
<div class="mr-gutter-xl-2"></div>
<div class="mb-gutter-xl-2"></div>
<div class="ml-gutter-xl-2"></div>

<div class="p-gutter-xl-2"></div>
<div class="px-gutter-xl-2"></div>
<div class="py-gutter-xl-2"></div>
<div class="pt-gutter-xl-2"></div>
<div class="pr-gutter-xl-2"></div>
<div class="pb-gutter-xl-2"></div>
<div class="pl-gutter-xl-2"></div>

<div class="m-gutter-xl-3"></div>
<div class="mx-gutter-xl-3"></div>
<div class="my-gutter-xl-3"></div>
<div class="mt-gutter-xl-3"></div>
<div class="mr-gutter-xl-3"></div>
<div class="mb-gutter-xl-3"></div>
<div class="ml-gutter-xl-3"></div>

<div class="p-gutter-xl-3"></div>
<div class="px-gutter-xl-3"></div>
<div class="py-gutter-xl-3"></div>
<div class="pt-gutter-xl-3"></div>
<div class="pr-gutter-xl-3"></div>
<div class="pb-gutter-xl-3"></div>
<div class="pl-gutter-xl-3"></div>

List group

Sizes

Item sizes

Responsive list group sizes

New
<!-- Source -->
<div class="list-group list-group-sm-1"></div>
<div class="list-group-item-sm-1"></div>
<div class="list-group-item-x-sm-1"></div>
<div class="list-group-item-y-sm-1"></div>

<div class="list-group list-group-sm-2"></div>
<div class="list-group-item-sm-2"></div>
<div class="list-group-item-x-sm-2"></div>
<div class="list-group-item-y-sm-2"></div>

<div class="list-group list-group-sm-3"></div>
<div class="list-group-item-sm-3"></div>
<div class="list-group-item-x-sm-3"></div>
<div class="list-group-item-y-sm-3"></div>

<div class="list-group list-group-sm-4"></div>
<div class="list-group-item-sm-4"></div>
<div class="list-group-item-x-sm-4"></div>
<div class="list-group-item-y-sm-4"></div>

<div class="list-group list-group-md-1"></div>
<div class="list-group-item-md-1"></div>
<div class="list-group-item-x-md-1"></div>
<div class="list-group-item-y-md-1"></div>

<div class="list-group list-group-md-2"></div>
<div class="list-group-item-md-2"></div>
<div class="list-group-item-x-md-2"></div>
<div class="list-group-item-y-md-2"></div>

<div class="list-group list-group-md-3"></div>
<div class="list-group-item-md-3"></div>
<div class="list-group-item-x-md-3"></div>
<div class="list-group-item-y-md-3"></div>

<div class="list-group list-group-md-4"></div>
<div class="list-group-item-md-4"></div>
<div class="list-group-item-x-md-4"></div>
<div class="list-group-item-y-md-4"></div>

<div class="list-group list-group-lg-1"></div>
<div class="list-group-item-lg-1"></div>
<div class="list-group-item-x-lg-1"></div>
<div class="list-group-item-y-lg-1"></div>

<div class="list-group list-group-lg-2"></div>
<div class="list-group-item-lg-2"></div>
<div class="list-group-item-x-lg-2"></div>
<div class="list-group-item-y-lg-2"></div>

<div class="list-group list-group-lg-3"></div>
<div class="list-group-item-lg-3"></div>
<div class="list-group-item-x-lg-3"></div>
<div class="list-group-item-y-lg-3"></div>

<div class="list-group list-group-lg-4"></div>
<div class="list-group-item-lg-4"></div>
<div class="list-group-item-x-lg-4"></div>
<div class="list-group-item-y-lg-4"></div>

<div class="list-group list-group-xl-1"></div>
<div class="list-group-item-xl-1"></div>
<div class="list-group-item-x-xl-1"></div>
<div class="list-group-item-y-xl-1"></div>

<div class="list-group list-group-xl-2"></div>
<div class="list-group-item-xl-2"></div>
<div class="list-group-item-x-xl-2"></div>
<div class="list-group-item-y-xl-2"></div>

<div class="list-group list-group-xl-3"></div>
<div class="list-group-item-xl-3"></div>
<div class="list-group-item-x-xl-3"></div>
<div class="list-group-item-y-xl-3"></div>

<div class="list-group list-group-xl-4"></div>
<div class="list-group-item-xl-4"></div>
<div class="list-group-item-x-xl-4"></div>
<div class="list-group-item-y-xl-4"></div>

Position

Spacing

<!-- Source -->
<div class="top-0"></div>
<div class="right-0"></div>
<div class="bottom-0"></div>
<div class="left-0"></div>

<div class="top-auto"></div>
<div class="right-auto"></div>
<div class="bottom-auto"></div>
<div class="left-auto"></div>

Spacing responsive

<!-- Source -->
<div class="top-sm-0"></div>
<div class="right-sm-0"></div>
<div class="bottom-sm-0"></div>
<div class="left-sm-0"></div>

<div class="top-md-0"></div>
<div class="right-md-0"></div>
<div class="bottom-md-0"></div>
<div class="left-md-0"></div>

<div class="top-lg-0"></div>
<div class="right-lg-0"></div>
<div class="bottom-lg-0"></div>
<div class="left-lg-0"></div>

<div class="top-xl-0"></div>
<div class="right-xl-0"></div>
<div class="bottom-xl-0"></div>
<div class="left-xl-0"></div>

<div class="top-sm-auto"></div>
<div class="right-sm-auto"></div>
<div class="bottom-sm-auto"></div>
<div class="left-sm-auto"></div>

<div class="top-md-auto"></div>
<div class="right-md-auto"></div>
<div class="bottom-md-auto"></div>
<div class="left-md-auto"></div>

<div class="top-lg-auto"></div>
<div class="right-lg-auto"></div>
<div class="bottom-lg-auto"></div>
<div class="left-lg-auto"></div>

<div class="top-xl-auto"></div>
<div class="right-xl-auto"></div>
<div class="bottom-xl-auto"></div>
<div class="left-xl-auto"></div>

Progress

Sizes

New
100%
100%
100%
100%
100%

Responsive progress sizes

New
<!-- Source -->
<div class="progress progress-sm-1"></div>
<div class="progress progress-sm-2"></div>
<div class="progress progress-sm-3"></div>
<div class="progress progress-sm-4"></div>
<div class="progress progress-sm-5"></div>

<div class="progress progress-md-1"></div>
<div class="progress progress-md-2"></div>
<div class="progress progress-md-3"></div>
<div class="progress progress-md-4"></div>
<div class="progress progress-md-5"></div>

<div class="progress progress-lg-1"></div>
<div class="progress progress-lg-2"></div>
<div class="progress progress-lg-3"></div>
<div class="progress progress-lg-4"></div>
<div class="progress progress-lg-5"></div>

<div class="progress progress-xl-1"></div>
<div class="progress progress-xl-2"></div>
<div class="progress progress-xl-3"></div>
<div class="progress progress-xl-4"></div>
<div class="progress progress-xl-5"></div>

ScrollSpy

Tree

This component requires postboot.js or scrollspy-tree.js.

Nav item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dropdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dropdown item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dropdown item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dropdown item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Size

New
<!-- Source -->
<div class="s-25"></div>
<div class="s-50"></div>
<div class="s-75"></div>
<div class="s-100"></div>
<div class="s-auto"></div>
<div class="ms-100"></div>
<div class="min-vs-100"></div>
<div class="vs-100"></div>

SVG

Fill

New

Hover

New

Hover opacity

New

Stroke

New

Hover

New

Hover opacity

New

Text

Custom

IndigoOrangePinkPurpleTeal

Alpha

PrimarySecondarySuccessInfoWarningDangerLightDarkBlackIndigoOrangePinkPurpleTealWhite

Hover

PrimarySecondarySuccessInfoWarningDangerLightDarkBlackIndigoOrangePinkPurpleTealWhite

Hover opacity

PrimarySecondarySuccessInfoWarningDangerLightDarkBlackIndigoOrangePinkPurpleTealWhite

State

New
PrimarySecondarySuccessInfoWarningDangerLightDarkIndigoOrangePinkPurpleTeal

Triple bar

Color

New

Typography

Responsive heading

<!-- Source -->
<div class="h1-sm"></div>
<div class="h2-sm"></div>
<div class="h3-sm"></div>
<div class="h4-sm"></div>
<div class="h5-sm"></div>
<div class="h6-sm"></div>

<div class="display-sm-1"></div>
<div class="display-sm-2"></div>
<div class="display-sm-3"></div>
<div class="display-sm-4"></div>

<div class="h1-md"></div>
<div class="h2-md"></div>
<div class="h3-md"></div>
<div class="h4-md"></div>
<div class="h5-md"></div>
<div class="h6-md"></div>

<div class="display-md-1"></div>
<div class="display-md-2"></div>
<div class="display-md-3"></div>
<div class="display-md-4"></div>

<div class="h1-lg"></div>
<div class="h2-lg"></div>
<div class="h3-lg"></div>
<div class="h4-lg"></div>
<div class="h5-lg"></div>
<div class="h6-lg"></div>

<div class="display-lg-1"></div>
<div class="display-lg-2"></div>
<div class="display-lg-3"></div>
<div class="display-lg-4"></div>

<div class="h1-xl"></div>
<div class="h2-xl"></div>
<div class="h3-xl"></div>
<div class="h4-xl"></div>
<div class="h5-xl"></div>
<div class="h6-xl"></div>

<div class="display-xl-1"></div>
<div class="display-xl-2"></div>
<div class="display-xl-3"></div>
<div class="display-xl-4"></div>