Divide Width

Utilities for controlling the divider width between an element's child items.

Classes

Class Output
d-divide-y > * + * --divide-y-reverse: 0;
border-top: calc(defaultpx * (1 - var(--divide-y-reverse))) solid currentColor !important;
border-bottom: calc(defaultpx * var(--divide-y-reverse)) solid currentColor !important;
d-divide-y0 > * + * --divide-y-reverse: 0;
border-top: calc(1px * (1 - var(--divide-y-reverse))) solid currentColor !important;
border-bottom: calc(1px * var(--divide-y-reverse)) solid currentColor !important;
d-divide-y2 > * + * --divide-y-reverse: 0;
border-top: calc(1px * (1 - var(--divide-y-reverse))) solid currentColor !important;
border-bottom: calc(1px * var(--divide-y-reverse)) solid currentColor !important;
d-divide-y4 > * + * --divide-y-reverse: 0;
border-top: calc(1px * (1 - var(--divide-y-reverse))) solid currentColor !important;
border-bottom: calc(1px * var(--divide-y-reverse)) solid currentColor !important;
d-divide-x > * + * --divide-x-reverse: 0;
border-right: calc(defaultpx * (1 - var(--divide-x-reverse))) solid currentColor !important;
border-left: calc(defaultpx * var(--divide-x-reverse)) solid currentColor !important;
d-divide-x0 > * + * --divide-x-reverse: 0;
border-right: calc(1px * (1 - var(--divide-x-reverse))) solid currentColor !important;
border-left: calc(1px * var(--divide-x-reverse)) solid currentColor !important;
d-divide-x2 > * + * --divide-x-reverse: 0;
border-right: calc(1px * (1 - var(--divide-x-reverse))) solid currentColor !important;
border-left: calc(1px * var(--divide-x-reverse)) solid currentColor !important;
d-divide-x4 > * + * --divide-x-reverse: 0;
border-right: calc(1px * (1 - var(--divide-x-reverse))) solid currentColor !important;
border-left: calc(1px * var(--divide-x-reverse)) solid currentColor !important;

Default Width

Use d-divide-{y|x} to create a 1px divider between an element's child items.

Changing the divider width

Use d-divide-{y|x}{n} to change the divider width between an element's child items.

Reversing the divider direction

If an element's flex-direction is reversed, apply d-divide-{y|x}-reverse to reverse the divider placement between an element's child items.