Replacing col with d-flex in Bootstrap 4

Question

Since the new Bootstrap 4 is migrating from using 'floating' elements to the better 'flexbox' method, just wondering is it ok to construct the entire grid structure using .d-flex rather than the existing .container .row .col way?

Since both of them are fundamentally constructed using flexbox I don't see any downside of replacing one with another. In fact I feel that .d-flex requires less css class name and make things more readable within the html.

There are other reasons why I prefer d-flex than the old col:

1. Horizontal and vertical elements - d-flex supports creating elements both horizontally (.flex-row) and vertically (.flex-column). Col only support horizontally.

2. Inline element - The element's width will inherit from the child and can be align dynamically using d-inline-flex. Whereas col grid is fix.

3. Advance re-ordering - d-flex uses .order-x and col uses .push and .pull. In my opinion, d-flex is more intuitive, the order of elements are represented through numbering and on the other hand the number in .col is how many grids are being push and pull away from the previous state. It gets messy when you are building a more complex site....

Please correct me if I'm wrong.

Answer 1

Bootstrap 4 beta just got out and the whole grid system is using flexbox from now on.

You can now achieve a whole grid with only flex and it has reduced the number of classes you need. The main advantage of the Bootstrap Grid System is that you have paddings around your columns and negative margins on the .row wrapper. That way, when the columns wrap (e.g. on smaller screens), they will stay correctly aligned.

To answer your 3 points:

1. Horizontal and vertical elements

   Just use the regular .row class to achieve a flexbox grid. You can even add .flex-column (even with breakpoints, like .flex-{breakpoint}-column). Know that the .row class has the flex-wrap: wrap property.

2. Inline element

   The column width is not necessarily fixed:

   • you can use .col-auto to set width: auto on your column
   • you can use the unit-less .col class to make the column use the available space
   • you can align them with all the flex utilities Bootstrap provides
   • you can mix column sizes (some fixed and some dynamic): e.g. .col-md-auto followed by .col.col-lg-2

3. Advance re-ordering

   • .col-push/pull-{breakpoint} has been replaced by .order-{breakpoint}.
   • you can use the margin utilities (e.g. m-{breakpoint}-auto) to replace .col-offset-{breakpoint}