With this PR, flexbox becomes the default layout option for Bootstrap 4. Our grid system and several components are now built with flexbox to start instead of having opt-in behavior via $enable-flex
. That Sass variable has been removed, Sass files cleaned up, docs consolidated, and migration and browser support notes updated. Beyond the flexbox changes, there are no additional changes to the compiled CSS at this time.
Here's specifically what's changed:
-
Removed the
$enable-flex
variable. Flexbox is now enabled by default and cannot be disabled via Sass variable. -
Removed the non-flexbox variants for our grid system, cards, media objects, list groups, and navigation components.
- For the grid, there should be no breaking changes to your code. You can, however, take advantage of the flexbox auto layout and alignment options though!
- For cards, this means you can now drop
.card-deck-wrapper
from your markup. - For media objects, this means you can be more flexible with the order of your markup (e.g.,
.media-left
and.media-right
don't need to come first in the DOM.) - For list groups, this simplifies the alignment of badges. No more required utilities just to vertically and horizontally align badges in list group items. (You might still need some for fine-tuning, though).
-
Consolidated grid docs to a single
grid.md
file (no moreflexbox-grid.md
.) This still needs some finessing as the docs don't flow as seamlessly as I'd like. For now, at least all the flexbox alignment and sizing docs have been ported over to the main grid docs. - Updated migration and browser support docs to clarify IE10+ support.
- Removed the compiled flexbox CSS bundles. The Gruntfile has had it's Sass tasks updated and the dist files have been removed from Git.
- Removed
flexbox.md
docs from the Getting started section.
Because of these changes, here's what's been modified in the compiled CSS:
- Clearfix has been removed from rows as it's no longer necessary with no
float
s being present. - Columns use
max-width
instead ofwidth
. While this was the case for the flexbox grid before this change, it's different from the default grid's use ofwidth
.
It's also worth noting that some components are still not built with flexbox; this PR doesn't address that. We'll tackle that later across the following components:
- Carousel
- Navbar
- Button groups
- Cards
More on that in the coming days!
Fixes #21387 (closed).