EdutainmentLIVE / elm-bootstrap / Bootstrap.Utilities.Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Flex containers

Block containers

block : Html.Attribute msg

Make an element become a flex container (whilst being a block level element).

blockSm : Html.Attribute msg

Make an element become a flex container (whilst being a block level element) from SM breakpoint and up.

blockMd : Html.Attribute msg

Make an element become a flex container (whilst being a block level element) from MD breakpoint and up.

blockLg : Html.Attribute msg

Make an element become a flex container (whilst being a block level element) from LG breakpoint and up.

blockXl : Html.Attribute msg

Make an element become a flex container (whilst being a block level element) from XL breakpoint and up.

Inline containers

inline : Html.Attribute msg

Make and element become a flex container (whilst being an inline element).

inlineSm : Html.Attribute msg

Make and element become a flex container (whilst being an inline element) from SM breakpoint and up.

inlineMd : Html.Attribute msg

Make and element become a flex container (whilst being an inline element) from MD breakpoint and up.

inlineLg : Html.Attribute msg

Make and element become a flex container (whilst being an inline element) from LG breakpoint and up.

inlineXl : Html.Attribute msg

Make and element become a flex container (whilst being an inline element) from XL breakpoint and up.

Direction

row : Html.Attribute msg

Set flex direction to row.

rowSm : Html.Attribute msg

Set flex direction to row from SM breakpoint and up.

rowMd : Html.Attribute msg

Set flex direction to row from MD breakpoint and up.

rowLg : Html.Attribute msg

Set flex direction to row from LG breakpoint and up.

rowXl : Html.Attribute msg

Set flex direction to row from XL breakpoint and up.

rowReverse : Html.Attribute msg

Set flex direction to row-reverse (starting from the oposite side).

rowReverseSm : Html.Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from SM breakpoint and up.

rowReverseMd : Html.Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from MD breakpoint and up.

rowReverseLg : Html.Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from LG breakpoint and up.

rowReverseXl : Html.Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from XL breakpoint and up.

col : Html.Attribute msg

Set flex direction to flex-column.

colSm : Html.Attribute msg

Set flex direction to flex-column from SM breakpoint and up.

colMd : Html.Attribute msg

Set flex direction to flex-column from MD breakpoint and up.

colLg : Html.Attribute msg

Set flex direction to flex-column from LG breakpoint and up.

colXl : Html.Attribute msg

Set flex direction to flex-column from XL breakpoint and up.

colReverse : Html.Attribute msg

Set flex direction to flex-column-reverse.

colReverseSm : Html.Attribute msg

Set flex direction to flex-column-reverse from SM breakpoint and up.

colReverseMd : Html.Attribute msg

Set flex direction to flex-column-reverse from MD breakpoint and up.

colReverseLg : Html.Attribute msg

Set flex direction to flex-column-reverse from LG breakpoint and up.

colReverseXl : Html.Attribute msg

Set flex direction to flex-column-reverse from XL breakpoint and up.

Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start y-axis if flex-direction: column). Choose from start (browser default)/ end / center / between / or around.

justifyStart : Html.Attribute msg

Set main axis alignment for items in flexbox container to start.

justifyStartSm : Html.Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.

justifyStartMd : Html.Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.

justifyStartLg : Html.Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.

justifyStartXl : Html.Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint XL and up.

justifyEnd : Html.Attribute msg

Set main axis alignment for items in flexbox container to end

justifyEndSm : Html.Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.

justifyEndMd : Html.Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.

justifyEndLg : Html.Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.

justifyEndXl : Html.Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint XL and up.

justifyCenter : Html.Attribute msg

Set main axis alignment for items in flexbox container to center.

justifyCenterSm : Html.Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.

justifyCenterMd : Html.Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.

justifyCenterLg : Html.Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.

justifyCenterXl : Html.Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint XL and up.

justifyBetween : Html.Attribute msg

Set main axis alignment for items in flexbox container to between.

justifyBetweenSm : Html.Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint SM and up.

justifyBetweenMd : Html.Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint MD and up.

justifyBetweenLg : Html.Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint LG and up.

justifyBetweenXl : Html.Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint XL and up.

justifyAround : Html.Attribute msg

Set main axis alignment for items in flexbox container to around.

justifyAroundSm : Html.Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint SM and up.

justifyAroundMd : Html.Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint MD and up.

justifyAroundLg : Html.Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint LG and up.

justifyAroundXl : Html.Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint XL and up.

Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from start / end / center / baseline / or stretch (browser default).

alignItemsStart : Html.Attribute msg

Set cross axis alignment for items in flexbox container to start.

alignItemsStartSm : Html.Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.

alignItemsStartMd : Html.Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.

alignItemsStartLg : Html.Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.

alignItemsStartXl : Html.Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.

alignItemsEnd : Html.Attribute msg

Set cross axis alignment for items in flexbox container to end.

alignItemsEndSm : Html.Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.

alignItemsEndMd : Html.Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.

alignItemsEndLg : Html.Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.

alignItemsEndXl : Html.Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.

alignItemsCenter : Html.Attribute msg

Set cross axis alignment for items in flexbox container to center.

alignItemsCenterSm : Html.Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.

alignItemsCenterMd : Html.Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.

alignItemsCenterLg : Html.Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.

alignItemsCenterXl : Html.Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.

alignItemsBaseline : Html.Attribute msg

Set cross axis alignment for items in flexbox container to baseline.

alignItemsBaselineSm : Html.Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint SM and up.

alignItemsBaselineMd : Html.Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint MD and up.

alignItemsBaselineLg : Html.Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.

alignItemsBaselineXl : Html.Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.

alignItemsStretch : Html.Attribute msg

Set cross axis alignment for items in flexbox container to stretched.

alignItemsStretchSm : Html.Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint SM and up.

alignItemsStretchMd : Html.Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint MD and up.

alignItemsStretchLg : Html.Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.

alignItemsStretchXl : Html.Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.

Wrapping

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with nowrap / wrap or reverse wrapping.

wrap : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines.

wrapSm : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.

wrapMd : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.

wrapLg : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.

wrapXl : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.

wrapReverse : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order.

wrapReverseSm : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint SM and up.

wrapReverseMd : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint MD and up.

wrapReverseLg : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint LG and up.

wrapReverseXl : Html.Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint XL and up.

nowrap : Html.Attribute msg

Don't allow flex items in a flex container to break into multiple lines.

nowrapSm : Html.Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.

nowrapMd : Html.Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.

nowrapLg : Html.Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.

nowrapXl : Html.Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.

Item level

Align self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from the same options as align-items: start / end / center / baseline / or stretch (browser default).

alignSelfStart : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start.

alignSelfStartSm : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint SM and up.

alignSelfStartMd : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint MD and up.

alignSelfStartLg : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.

alignSelfStartXl : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.

alignSelfEnd : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end.

alignSelfEndSm : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint SM and up.

alignSelfEndMd : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint MD and up.

alignSelfEndLg : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.

alignSelfEndXl : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.

alignSelfCenter : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center.

alignSelfCenterSm : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint SM and up.

alignSelfCenterMd : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint MD and up.

alignSelfCenterLg : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.

alignSelfCenterXl : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.

alignSelfBaseline : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline.

alignSelfBaselineSm : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint SM and up.

alignSelfBaselineMd : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint MD and up.

alignSelfBaselineLg : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.

alignSelfBaselineXl : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.

alignSelfStretch : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch.

alignSelfStretchSm : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint SM and up.

alignSelfStretchMd : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint MD and up.

alignSelfStretchLg : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint LG and up.

alignSelfStretchXl : Html.Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint LG and up.