Bootstrap 5 Breakpoints: Grid System and Device Coverage

Q: Bootstrap 5 Breakpoints: Grid System and Device Coverage

## Bootstrap 5 Breakpoints Reference Bootstrap 5 uses six breakpoint tiers (including the default xs) to build responsive layouts. Each breakpoint uses a min-width media query. ### Default Breakpoints | Breakpoint | Class infix | Min Width | Max Width | |-----------|------------|-----------|-----------| | Extra small | None | 0px | 575px | | Small | sm | 576px | 767px | | Medium | md | 768px | 991px | | Large | lg | 992px | 1199px | | Extra large | xl | 1200px | 1399px | | Extra extra large |

Q: When is this useful?

A development team migrating from Bootstrap 4 to Bootstrap 5 needs to understand the updated breakpoint values and how they map to their target audience's most common device viewport sizes.

Complete reference for Bootstrap 5 responsive breakpoints. Maps each breakpoint (sm, md, lg, xl, xxl) to real device viewport sizes with grid examples.

Framework Breakpoints

Detailed Explanation

Bootstrap 5 Breakpoints Reference

Bootstrap 5 uses six breakpoint tiers (including the default xs) to build responsive layouts. Each breakpoint uses a min-width media query.

Default Breakpoints

Breakpoint	Class infix	Min Width	Max Width
Extra small	None	0px	575px
Small	`sm`	576px	767px
Medium	`md`	768px	991px
Large	`lg`	992px	1199px
Extra large	`xl`	1200px	1399px
Extra extra large	`xxl`	1400px	-

Device Mapping

xs (< 576px): All smartphones in portrait — iPhones (320-440px), Android phones (360-448px)
sm (576-767px): Large phones in landscape, small tablets
md (768-991px): iPad portrait (820px), Galaxy Tab portrait
lg (992-1199px): iPad landscape, Chromebooks, small laptops
xl (1200-1399px): Standard laptops, MacBook Air at default scale
xxl (1400px+): MacBook Pro, desktop monitors, 4K displays

Bootstrap vs Tailwind Comparison

Range	Bootstrap	Tailwind
Phone → Tablet	sm: 576px	sm: 640px
Tablet	md: 768px	md: 768px
Small Desktop	lg: 992px	lg: 1024px
Desktop	xl: 1200px	xl: 1280px
Large Desktop	xxl: 1400px	2xl: 1536px

Bootstrap uses slightly lower breakpoint values than Tailwind, which means layouts switch earlier. The md breakpoint at 768px is identical in both frameworks.

Grid System Usage

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on mobile, half on tablet, third on desktop -->
    </div>
  </div>
</div>

Container Max-Widths

Bootstrap containers have different max-widths at each breakpoint:

sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px

These values constrain content width and provide consistent margins at each screen size.

Use Case