Autofit Row
Make content expand to fill remaining space or create equally spaced content with the .autofit-row, .autofit-col, and .autofit-col-expand classes.
.autofit-row, .autofit-col, .autofit-col-expand shouldn't be used for laying out site pages, rather it's most useful for small chunks of content inside other components (e.g. cards or list-groups).
.autofit-col are flex-direction: column; (IE 10-11 workaround because they don't respect min/max width or min/max height in flex items) become block level elements by default, see https://www.w3.org/TR/css-flexbox-1/#flex-items. If you want to display content inside .autofit-col using floats, inline, or inline-block, wrap the content with ``````.
Autofit Spacing
The autofit-padded class should be added to autofit-row to give padding to all autofit-cols that are direct children of autofit-row.
The autofit-padded-no-gutters-x class gives padding to all autofit-cols that are direct children of autofit-row. It has negative margins on the left and right to offset the padding (similar to Bootstrap's row class).
The autofit-padded-no-gutters-y class gives padding to all autofit-cols that are direct children of autofit-row. It has negative margins on the top and bottom to offset the padding (Generally used if nesting .autofit-row).
The autofit-padded-no-gutters class gives padding to all autofit-cols that are direct children of autofit-row. It has negative margins on the top, right, bottom, and left to offset the padding (Generally used if nesting .autofit-row).
Autofit Row Vertical Alignment
Autofit Row vertically aligns to the top by default.
The autofit-row-center class vertically aligns items in autofit-row to the middle.
The autofit-row-end class vertically aligns items in autofit-row to the bottom.
Autofit Float
The component autofit-float or .autofit-float-{sm|md}-down simulates the behavior of floated elements in .autofit-row. Items that break to a new line will be aligned to the left.
This pattern provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.
Autofit Float End
Mimic "right floated" elements.
The component .autofit-float-end or .autofit-float-end-{sm|md}-down simulates the behavior of "right floated" elements in .autofit-row. Items that break to a new line will be aligned right.
Aligning items to the left will require nesting autofit-float autofit-row inside an autofit-col autofit-col-expand with the use of helper classes.
Nesting Autofit Rows
Inline Item
Use the inline-item inline-item-before, inline-item inline-item-middle, and inline-item inline-item-after classes to provide consistent spacing between text and icons in elements such as links or buttons. This can also be used in other components that have inline content (e.g., badge and label).
Link without Whitespace
linkwhy, but ok.Link with Whitespace
linkButton without Whitespace
Button with Whitespace
Close
A Button or Link for closing stuff.