Bootstrap is the leading choice of front-end developers. A trusted open source front-end framework, one can easily develop a modern website with features like mobile responsiveness. In order to build an attractive and functional website, Bootstrap provides the basic structure of HTML and CSS with predefined classes which help with device responsiveness
Bootstrap3 has 4 grid classes (col-xs-3, col-sm-3, col-md-3, col-lg-3), while version 4 has 5 grid classes (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3).
Bootstrap 4 has removed the xs from the lowest breakpoint. While in Bootstrap 3 the lower point works with xs (.col-xs) but now in Bootstrap 4 it has been removed and used only (.col-) for a lower breakpoint.
Bootstrap 4 Responsive breakpoints
| Breakpoint Screen Size | Media Query Width | Container Width |
|---|---|---|
| xl | min-width 1200px | 1140px |
| lg | min-width 992px | 960px |
| md | min-width 768px | 720px |
| sm | min-width 576px | 540px |
Bootstrap 3.4 Responsive breakpoints
| Breakpoint Screen Size | Media Query Width | Container Width |
|---|---|---|
| lg | min-width 1200px | 1170px |
| md | min-width 992px | 970px |
| sm | min-width 768px | 750px |
| xs | Less then 768 | 100% |