I've recently decided to make the move from Bootstrap 3 to Bootstrap 4 and I'm taking a closer look at the changes in the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
It explains:
Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For instance, four instances of
.col-smwill each automatically be 25% wide from the small breakpoint and up.Column classes indicate the number of columns you’d like to use out of the possible 12 per row. Therefore, if you want three equivalent-width columns across, you can utilize
.col-4.
Given this information, what would be the distinction between using:
- Four instances of
.col-sm - Four instances of
.col-3
Both options would occupy 25% width of a .row. Am I correct?
So, what is the difference between specifying it either way?
In Bootstrap 3, you were required to use specific numbers within a 12 column grid, for example, using 4 instances of .col-sm-3 meant you would have 4 (25% width) columns since 12/3 = 4