bootstrap-flexbox

Add flexbox classes to Bootstrap

How to use

To add "display: flex" use following classes:

• .flex
• .flex-xs
• .flex-sm
• .flex-md
• .flex-lg

To add "flex-wrap: wrap" use following classes:

• .flex-wrap
• .flex-xs-wrap
• .flex-sm-wrap
• .flex-md-wrap
• .flex-lg-wrap

To add "justify-content: space-between" use following classes:

• .justify-space-between
• .justify-xs-space-between
• .justify-sm-space-between
• .justify-md-space-between
• .justify-lg-space-between

To add "justify-content: flex-end" use following classes:

• .justify-flex-end
• .justify-xs-flex-end
• .justify-sm-flex-end
• .justify-md-flex-end
• .justify-lg-flex-end

To add "flex-grow: 1" use following classes:

• .flex-grow-fill
• .flex-grow-xs-fill
• .flex-grow-sm-fill
• .flex-grow-md-fill
• .flex-grow-lg-fill

To center elements (horizontally, vertically or both) use following classes:

• .flex-horizontal-centered
• .flex-vertical-centered
• .flex-centered
• .flex-xs-horizontal-centered
• .flex-xs-vertical-centered
• .flex-xs-centered
• .flex-sm-horizontal-centered
• .flex-sm-vertical-centered
• .flex-sm-centered
• .flex-md-horizontal-centered
• .flex-md-vertical-centered
• .flex-md-centered
• .flex-lg-horizontal-centered
• .flex-lg-vertical-centered
• .flex-lg-centered

To remove "display: flex" and add "display: block" use following classes:

• .no-flex-xs-block
• .no-flex-sm-block
• .no-flex-md-block
• .no-flex-lg-block

To remove "display: flex" and add "display: inline-block" use following classes:

• .no-flex-xs-inline-block
• .no-flex-sm-inline-block
• .no-flex-md-inline-block
• .no-flex-lg-inline-block

On the next release:

• flex-direction
• no-shrink