Cursor

Pointer behavior when hovering elements

<div class="cursor-auto" />
<div class="cursor-pointer" />
<div class="cursor-help" />
<div class="cursor-crosshair" />
<div class="cursor-wait" />
<div class="cursor-grab" />
<div class="cursor-zoom-in" />
<div class="cursor-not-allowed" />

<button class="pointer-events-none">Pointer events off</button>
<button class="pointer-events">Pointer events on</button>

Overflow

Overflow shorthand classes

<div class="overflow-hidden" />
<div class="overflow-x-auto" />

Transformations

Transform elements by flipping them

<h1 class="mirror-x">G</h1>
<h1 class="mirror-y">G</h1>

Gap

We're extending the built-in utility for gaps in bootstrap since it doesn't have support for controlling row/column gap separately.
Use gap-x-{size} and gap-y-{size} to change the gap between rows and columns independently (also with support for breakpoints as seen below).

Examples

<div class="d-flex gap-y-1" />
<div class="d-flex gap-y-lg-3" />

<div class="d-flex gap-x-1" />
<div class="d-flex gap-x-md-1" />

<div class="d-flex gap-1" />
<div class="d-flex gap-md-4" />
...etc

.gap-x-1 {
    column-gap: 0.5rem;
}

.gap-y-4 {
    row-gap: 2rem;
}

.gap-1 {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}

Defaults

We're just extending the default utilities exposed by bootstrap. The list below shows which utilities we have in the current version.

Align

File bootstrap/scss/utilities/\_align.scss

Background

File bootstrap/scss/utilities/\_background.scss

Clearfix

File bootstrap/scss/utilities/\_clearfix.scss

Borders

File bootstrap/scss/utilities/\_borders.scss

Display

File bootstrap/scss/utilities/\_display.scss

Position

File bootstrap/scss/utilities/\_position.scss

Spacing

File bootstrap/scss/utilities/\_spacing.scss

Text

File bootstrap/scss/utilities/\_text.scss

More can be found here: https://getbootstrap.com/docs/4.0/utilities/borders/