Learn
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 |
|---|---|---|
| Extra small | < 576 px |
portrait smartphones |
| Small | ≥ 576 px |
landscape smartphones |
| Medium | ≥ 768 px |
tablets |
| Large | ≥ 992 px |
desktops |
| Extra Large | ≥ 1200 px |
large desktop |
By using these breakpoints in combination with Bootstrap’s grid, we can customize the layout of our content for different screens.
Instructions
Examine the provided GIF, notice how the content of the webpage changes on different screen sizes.
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.