Utilities

In addition to the default set of Bootstrap Utility Classes, Leap includes a range of utility classes to make creating new components easier.

Background Colors

These classes are in addition the the Bootstrap Color Utilities

.bg-primary: Apply to element to adjust background color
.bg-primary-2: Apply to element to adjust background color
.bg-primary-3: Apply to element to adjust background color
.bg-primary-alt: Apply to element to adjust to a lightened background color
.bg-primary-2-alt: Apply to element to adjust to a lightened background color
.bg-primary-3-alt: Apply to element to adjust to a lightened background color

Blend Modes

.blend-mode-multiply: Apply to element to add mix-blend-mode: multiply;

Height

I occupy 30% of the viewport height.

.min-vh-(10 - 100): Apply in increments of 10 to an element adjust to set its height to a fraction of the viewport's height. eg: .min-vh-30 will occupy 30% of the viewport's height.

Layers

.layer-(1 - 4): Apply to element to set its z-index value to the value indicated by the numerator. eg: .layer-2 would set the element's z-index to 2

Opacity

opacity-10

opacity-20

opacity-30

opacity-40

opacity-50

opacity-60

opacity-70

opacity-80

opacity-90

opacity-100

.opacity-(0 - 100): Apply to element to set its opacity value to the value indicated by the numerator. eg: .opacity-20 would set the element's opacity to .2

Shadows

This card has the .shadow-3d class applied

These classes are in addition the the Bootstrap Shadow Utilities

.shadow-3d: Apply to element to apply a 3d shadow effect

Text

These classes are in addition the the Bootstrap Text Utilities

.text-strikethrough: Style the text with text-decoration: line-through;

Transforms

I am flipped on the x-axis

I am flipped on the y-axis

I am rotated left

I am rotated right

.flip-x: Flips the element on its X axis
.flip-y: Flips the element on its Y axis
.rotate-left: Rotates the element 1 degree to the left
.rotate-right: Rotates the element 1 degree to the right