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

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?