Breakpoints in CSS are defined using media queries to adjust layouts, typography, and elements based on the viewport width. They help ensure that a website looks and functions well across different screen sizes — from mobile to desktop.

Common Breakpoints for Responsive Design

1
Small screens (mobile): 480px – 640px
2
Medium screens (tablet): 768px
3
Large screens (desktop): 1024px
4
Extra large screens (wide desktop): 1280px or higher
5
You can customize breakpoints based on your project needs — these values are only guidelines.

Example: Defining and Using CSS Breakpoints

In this example, styles scale up as the viewport width increases. Starting with a mobile-first approach, each breakpoint progressively enhances the layout for larger screens, maintaining readability and balance across devices.

Difficulty: 5/10

Topics: responsive design, utility classes, media queries

Scenario Questions

0-2 years experience

1
How would you hide a navigation bar on screens smaller than the 'md' breakpoint using Tailwind CSS?
2
You applied Bootstrap's 'col-md-6' class but the columns don't stack on a phone. What might be causing that?
3
If you need a button to become full‑width only on extra‑small screens in Bootstrap, which classes would you use?

2-5 years experience

1
While building a three‑column layout that should collapse to a single column on tablets, which Bootstrap breakpoint utilities would you choose and why?
2
A component using Tailwind's 'lg:' utilities stopped responding after a recent CSS change. Walk me through how you'd debug the issue.
3
Explain how you would implement a responsive image that switches source at the 'md' breakpoint in a React component using Tailwind.

5-8 years experience

1
Our product mixes Bootstrap and Tailwind across micro‑frontends. How would you ensure breakpoint behavior stays consistent across both frameworks?
2
If a page suffers layout thrashing because many elements have breakpoint‑specific classes, what performance‑optimisation techniques would you apply?
3
Describe how you would create a shared design token file that defines breakpoint values for both Bootstrap and Tailwind in a large codebase.

8+ years experience

1
We need to migrate a legacy codebase that uses custom media queries to Tailwind's breakpoint scale. What architectural considerations and migration plan would you propose?
2
How would you design a unified breakpoint strategy that supports a mobile‑first React SPA and a server‑rendered Rails app using Bootstrap, while keeping future scalability in mind?
3
When introducing a new breakpoint across multiple teams, how do you manage versioning, documentation, and backward compatibility to avoid breaking existing layouts?

Follow-up Questions

❓What tools do you use to verify breakpoint behavior in the browser?
❓How would you handle a situation where a breakpoint value needs to change across the whole product?
❓Can you give an example of a trade‑off you faced when choosing a breakpoint strategy?