Breakpoints
Responsive breakpoints define the screen size thresholds where layouts adapt to provide optimal user experiences across different devices. Bootstrap's mobile-first approach uses five breakpoint tiers to create flexible, scalable designs that work seamlessly from smartphones to large desktop displays.
Breakpoint Details
The table below displays Bootstrap's responsive breakpoint system with corresponding class prefixes and minimum screen widths. This reference table shows the five breakpoint tiers (sm, md, lg, xl, xxl) and their pixel thresholds, providing developers with essential information for implementing responsive layouts and utility classes.
| Breakpoint | Class prefix | Screen size | Device |
|---|---|---|---|
| Small | sm |
≥ 576px | Small devices like landscape phones |
| Medium | md |
≥ 768px | Medium devices like tablets |
| Large | lg |
≥ 992px | Large devices like desktops |
| Extra large | xl |
≥ 1200px | Extra large devices like large desktops |
| Extra extra large | xxl |
≥ 1400px | Extra extra large devices like wide screens |
Breakpoint Implementation
Bootstrap's breakpoint system uses CSS media queries with minimum-width values, following a mobile-first methodology. Each breakpoint applies styles from that screen size upward, allowing for progressive enhancement of layouts.
Class Prefix Usage
sm(≥576px): Small devices like landscape phonesmd(≥768px): Medium devices like tabletslg(≥992px): Large devices like desktopsxl(≥1200px): Extra large devices like large desktopsxxl(≥1400px): Extra extra large devices like wide screens
Mobile-First Approach
Styles without breakpoint prefixes apply to all screen sizes (xs and up). Adding breakpoint prefixes (e.g., .col-md-6, .d-lg-block) applies those styles only at the specified breakpoint and larger screens. This ensures efficient CSS delivery and optimal performance across devices.
Implementation Examples
.col-md-6: Half-width column starting at medium screens.d-none .d-lg-block: Hidden on small/medium, visible on large screens.text-center .text-lg-start: Centered text on mobile, left-aligned on desktop