Alignment

Included in the CSS are a few dozen utility classes for arranging content. They can be used with or without the flex grid.

These classes are flex box modifiers and depend on the element also having an attribute of display: flex;. When in doubt, use is-d-flex in addition to the class you need!

Rows & Columns

To manually arrange children in a container as in a row or in a column, you can use these helper classes.

Justify content

To manually apply a justify-content property to an element’s horizontal position (or vertical if the container is a flex column), use the helper class has-justify-content-X, where X is the position you want.

Align Items & Align Content

To manually apply align-items or align-content properties to an element for vertical positioning (or horizontal if the container is a flex column), use the helper class has-align-items-X or has-align-content-X, respectively, where X is the position you want.

align-items

align-content

Grow & Shrink

To manually set elements in a container to grow or shrink, add the class has-X-#, where X is grow or shrink, and # is 0 or 1. 0 means disabled, 1 means enabled.

---

Is there information missing? Edit this page on Github!