Learn
Learn Bootstrap 4: Grid
Bootstrap Breakpoints

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.

Folder Icon

Sign up to start coding

Already have an account?