31 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!26197V4 dev xmr,!20778V4 dev,!20539Allow multiple modals,!20854Fixes 15534,!19272V4 dev xmr grunt html,!19581V4 fix popover,!20493V4 dev display,!20636Fix docs for heading sizes,!19824blockquote-center,!22547Finished a new translation for bootstrap,!19534Docs 17264,!18704Extend form docs with example form errors,!19533Npm deps,!22143Fix selectable disabled toggle radio buttons,!22598test,!21067dfsa,!19602V4 palettes arun,!19448New pull request for testing,!19358XXL grid size,!19825.blockquote-center,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!19754Issue template,!19753Card img overlay padding,!19580ExitStars,!19099v4: Grid redux,!17021v4
Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content.
Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
{% callout warning %}
**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled.
{% endcallout %}
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## How it works
The flexbox grid system behaves similar to our default grid system, but with a few notable differences:
-[Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise.
- Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system.
- Flexbox grid columns without a set width will automatically layout with even widths. For example, four columns will each automatically be 25% wide.
- Flexbox grid columns have significantly more alignment options available, including vertical alignment.
Chill? Awesome—keep reading for more information and some code snippets.
## Auto-layout columns
As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col`s and you're good to go.
<divclass="bd-example-row">
{% example html %}
<divclass="container">
<divclass="row">
<divclass="col">
One of three columns
</div>
<divclass="col">
One of three columns
</div>
<divclass="col">
One of three columns
</div>
</div>
</div>
{% endexample %}
</div>
Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.
