Reading time: < 1 minute
Good afternoon, today I’m going to explain how Bootstrap breakpoints work.
By default, Bootstrap is composed of 12 columns, which will adjust to different screens depending on the specified breakpoint.
Breakpoints | Bootstrap Prefix | Screen Dimensions |
---|---|---|
X-Small | <576px | |
Small | sm | ≥576px |
Medium | md | ≥768px |
Large | lg |
≥992px |
Extra Large | xl |
≥1200px |
Extra Extra Large | xxl | ≥1400 pixels |
Here’s the documentation on Breakpoints.
In the next tutorial, I will show you how to design media queries according to your needs, whether you want to add breakpoints from a min or max screen size, or specify a range from a min to a max size.
I hope this helps you.
Reading time: < 1 minute
Good afternoon, today I’m going to explain how Bootstrap breakpoints work.
By default, Bootstrap is composed of 12 columns, which will adjust to different screens depending on the specified breakpoint.
Breakpoints | Bootstrap Prefix | Screen Dimensions |
---|---|---|
X-Small | <576px | |
Small | sm | ≥576px |
Medium | md | ≥768px |
Large | lg |
≥992px |
Extra Large | xl |
≥1200px |
Extra Extra Large | xxl | ≥1400 pixels |
Here’s the documentation on Breakpoints.
In the next tutorial, I will show you how to design media queries according to your needs, whether you want to add breakpoints from a min or max screen size, or specify a range from a min to a max size.
I hope this helps you.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/cropped-light_logo-5.png?resize=100%2C100&ssl=1)