Justify Content

Utilities for setting how an element's space around and between content is distributed along it's main axis.

Classes

Class Output
.d-jc-flex-start justify-content: flex-start
.d-jc-flex-end justify-content: flex-end
.d-jc-center justify-content: center
.d-jc-space-around justify-content: space-around
.d-jc-space-between justify-content: space-between
.d-jc-space-evenly justify-content: space-evenly
.d-jc-baseline justify-content: baseline
.d-jc-normal justify-content: normal
.d-jc-unset justify-content: unset

Flex Start

Use d-jc-flex-start to justify items against the start of the element's main axis. This is the default value.

Center

Use d-jc-center to justify items along the center of the element's main axis.

Flex End

Use d-jc-flex-end to justify items against the end of the element's main axis.

Space Around

Use d-jc-space-around to justify items along the element's main axis so that there is an equal amount of space on each side of the item. This effectively takes all available space, divides it for each child element, placing half of available space on either side of the child. This is why the space appears doubled for interior objects versus end objects.

Space Between

Use d-jc-space-between to justify items along the element's main axis so that there is an equal amount of space between each item without inserting any space between the first or last object.

Space Evenly

Use d-jc-space-evenly to justify items along the element's main axis so that there is an equal amount of space on each side of the item, but unlike d-jc-space-around visually evenly spaces objects.