Created by: dankreiger
This example from the docs (and a few others) outline a way that I don't think Bootstrap 4 can be used.
In this PR I removed these examples from the docs.
The Problem
- using
.col-*(or.col#{$infix}-*) and.col(or.col#{$infix}) in the same layout results with rows of unequal length.
Here is an example from the Bootstrap docs in CodePen:
See example 1 in this CodePen. You will notice it especially when resizing the screen width.
Using column classes with an explicit number alone isn't always good either. Here is the problem with this example from the docs
See example 2 in this CodePen
There is a good use case for using .col or .col#{infix} classes by themselves in multiple rows.
Since these classes utilize the power of flow-grow, they can solve a problem that existed in Bootstrap 3, and still exists in Bootstrap 4 (such as the example directly above) when using only .col-* classes.
Problem: when one row has 2 columns and another row has 3 columns, the rows have different lengths
We see rows uneven in length in Bootstrap 3:
We see rows uneven in length in Bootstrap 4 when using only the number specific .col-* or .col#{infix}-* syntax:
All this unevenness becomes especially noticeable when there are multiple rows:
I'm not sure if there is a global solution for this, but I updated the docs so that users aren't encouraged to combine .col columns with .col-* columns.
Perhaps we could let users know about the benefits of using the .col classes alone (e.g. how they solve the 2-col row vs. 3-col row conundrum).
The result of very slight unevenness on these columns can be pretty jarring to the eye.
I have a Stack Overflow post about this when I first noticed the problem after setting the $container-max-width. However, I realized this problem can be reproduced without setting max-width (like in the examples above). It seems to be a core problem in the library.