Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.
Flexbox support is available for a number of Bootstrap’s components:
- The entire grid system (mixins and predefined classes), which switch from
- Input groups, which move from
- The media component moves from
display: table;and a number of hacky styles to a simple
In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:
- Easy vertical alignment of content within a parent element.
- Easy reordering of content across devices and screen resolutions with the help of media queries.
- Easy CSS-only equal height columns for your grid-based layouts.
All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.
How it works
If you’re familiar with modifying variables in Sass—or any other CSS preprocessor—you’ll be right at home to move into flexbox mode.
- Open the
_variables.scssfile and find the
- Change it from
- Recompile, and done!
Alternatively, if you don’t need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. Head to the download page for more information.
Enabling flexbox means reduced browser and device support:
- Internet Explorer 9 and below do not support flexbox.
- Internet Explorer 10 has a few known quirks (see the “Known issues” tab in Can I use…), requires using a prefix, and only supports the syntax from the old 2012 version of the spec.
Please be extra conscious of your user base when enabling flexbox in your project. Visit Can I use… for details on browser support of flexbox.