Position Utilities

The positions utilities included with the KW UI Kit directly align with Bootstrap's Display Utilities, but are extended to include the media breakpoints as well.

They allow you to easily and responsively toggle the position property of elements.

Notation

Poisition utilities that apply to all breakpoints (from xs to lg) should not have a breakpoint abbreviation in them. This is because those classes are applied for every screen size and are not bound by a media query.

The syntax for usage is as follows:

// Without breakpoint
.position-{value}
// With breakpoint
.position-{breakpoint}-{value}

The value options are:

• static
• relative
• absolute
• fixed
• sticky

Examples

// Position absolute on all breakpoints
<div className="position-absolute"></div>
// Position fixed on small
<div className="position-fixed position-sm-static"></div>