2

I'm migrating from Bootstrap 3 to 4 and trying to understand the differences when it comes to the grid.

https://getbootstrap.com/docs/4.0/layout/grid/

It says:

  • Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will 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. So, if you want three equal-width columns across, you can use .col-4.

Given this, what would be the difference between using:

  1. Four instances of .col-sm
  2. Four instances of .col-3

Both of these would occupy 25% width of a .row. Correct?

So what's the difference between specifying it either way?

In Bootstrap 3 you had to use the specific numbers within a 12 column grid, e.g. using 4 instances of .col-sm-3 meant you would have 4 (25% width) columns since 12/3 = 4

Community
  • 1
  • 1
Andy
  • 5,142
  • 11
  • 58
  • 131

2 Answers2

2

"Given this, what would be the difference between using:"

  • Four instances of .col-sm
  • Four instances of .col-3

Yes, in some cases they'd appear the same, but col-3 would never stack vertically since is applies to the smallest (xs) breakpoint. However, the col-md will stack vertically on the medium breakpoint of less than 768px.

https://www.codeply.com/go/xi74w61tdk

Outside of your use case using 4 columns, col-3 will always be 25% width. col-md will grow equally regardless of the number columns.

Also see: What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

In Bootstrap 3 grid system we had 4 breakpoints

Extra small (for smartphones .col-xs-*)

Small (for tablets .col-sm-*)

Medium (for laptops .col-md-*)

Large (for laptops/desktops .col-lg-*).

In Bootstrap 4 there is a new -xl- size. Also the -xs- infix has been removed, so smallest columns are simply col-1, col-2.. col-12, etc..

col-* - 0 (xs)

col-sm-* - 576px

col-md-* - 768px

col-lg-* - 992px

col-xl-* - 1200px

Alex
  • 878
  • 1
  • 10
  • 25