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

Image
.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