Friday, March 16, 2018

Bootstrap Breakpoints

It seems like I'm constantly looking up Bootstrap's breakpoints so I figured I should just put them here for (my own) easy future reference.

XS (Extra Small) SM (Small) MD (Medium) LG (Large) XL (Extra Large) XXL (Extra Extra Large)
V5 <576px 576px ‐ 767px 768px ‐ 991px 992px ‐ 1199px 1199px - 1399px >1399px
V4 <576px 576px ‐ 767px 768px ‐ 991px 992px ‐ 1199px >1199px N/A
V3.3.7 <768px 768px ‐ 991px 992px ‐ 1199px >1199px N/A N/A
CDK <600px 600px - 1024px 1024px - 1439px 1440px - 1919px >1919px N/A

Now that I've put this table together I realize that part of my confusion is that Bootstrap 4 added the XL breakpoint, which caused the scales to shift. Good to know.
Edit: I've added the Angular CDK breakpoints
Edit: I've added the Bootstrap V5 breakpoints

No comments:

Post a Comment