Frameworks ship a tested breakpoint scale and classes that switch on at each breakpoint. All four below are MIT-licensed and mobile first: an unprefixed class applies at every width, a breakpoint class from that width up.
| Framework | Responsive syntax | Breakpoints | Character |
|---|---|---|---|
| Bootstrap 5.3.8 2,007 | col-md-8, d-lg-none | 576-1,400px | Components, 12-column grid |
| Tailwind CSS 4.3 5,202 | md:grid-cols-3, @md:flex | 40-96rem | Utilities, container variants |
| Bulma 1.0.4 99,637 | is-half-tablet | 769-1,408px | Flexbox columns, no JavaScript |
| Pico CSS 2.1.1 441,173 | Class-less HTML | Six widths | Font size grows with screen |
The names do not line up: Bootstrap's md is 768px, Tailwind's md is 48rem, and Bulma calls 769px "tablet". Reuse your framework's breakpoints in custom CSS so components change together (Bootstrap and Tailwind CSS).