Differences between col-, col-sm-, col-md-, col-lg-, col-xl-

Question

Anonymous User · Answer

While Bootstrap uses ems or rems to define most sizes, px is used for grid breakpoints and container widths. This is because the width of the viewport is in pixels and does not change with font size. See how aspects of the Bootstrap Grid System work on multiple devices with a handy table : Extra small Max container width Class prefix # of columns &lt;576px Small None (auto) .col- 12 ≥576px Medium 540px .col-sm- 12 ≥768px Large 720px .col-md- 12 ≥992px Extra large 960px .col-lg- 12 ≥1200px 1140px .col-xl- 12 Here is the example for the responsive grid columns : Hope this will help you. Happy Coding!

Extra small	Max container width	Class prefix	# of columns
<576px Small	None (auto)	.col-	12
≥576px Medium	540px	.col-sm-	12
≥768px Large	720px	.col-md-	12
≥992px Extra large	960px	.col-lg-	12
≥1200px	1140px	.col-xl-	12

forum

Differences between col-, col-sm-, col-md-, col-lg-, col-xl-

Can you answer this question?

1 Answers