One benefit of using Bootstrap is that it incorporates responsive design. With responsive design, the layout of the content changes to accommodate a user’s screen size.
Bootstrap categorizes screen sizes into 5 categories or as breakpoints: extra small, small, medium, large, and extra large. Each breakpoint has a range measured in pixels. The range of these breakpoints and accompanying device types are marked in the following table:
|Category||Breakpoint Range||Device Type|
By using these breakpoints in combination with Bootstrap’s grid, we can customize the layout of our content for different screens.
Examine the provided GIF, notice how the content of the webpage changes on different screen sizes.