Responsive Breakpoint Checker

See the active Tailwind, Bootstrap, and custom breakpoint for the current browser viewport.

Current viewport

Measuring…

Resize your browser and the active breakpoint updates live.

Tailwind

base

Next range

Bootstrap

Next range

Custom

mobile

Next range

Custom breakpoints

Adjust these values to match your project and see which range is active.

Mobile Tablet Laptop Desktop

Framework	Ranges
Tailwind	sm 640, md 768, lg 1024, xl 1280, 2xl 1536
Bootstrap	sm 576, md 768, lg 992, xl 1200, xxl 1400
Custom	Editable ranges based on your project settings.

Responsive CSS normally reacts to the browser viewport. A 4K monitor can still show a tablet-width layout if the browser window is narrow.

A breakpoint is a viewport width where CSS layout rules change for different screen sizes.

It checks standard Tailwind breakpoint widths and lets you add custom values for your own project.

Breakpoints use viewport width, not physical screen resolution or monitor size.

Yes. Resize the browser until the layout changes, then copy the active breakpoint and viewport.

Content cluster

Use these supporting guides to understand the tool result and next testing steps.