/bootstrap-flexbox

Add flexbox classes to Bootstrap.

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