CSS Responsive
RWD Frameworks
CSS frameworks package tested, responsive building blocks so you do not have to write every layout from scratch. Two dominate today: Bootstrap, a component-and-grid library, and Tailwind CSS, a utility-first toolkit. Understanding how each approaches responsiveness helps you choose the right tool.
Why Use a Framework?
Frameworks give you a consistent, cross-browser-tested foundation: a responsive grid, sensible defaults, and ready-made components or utilities. They speed up development and reduce bugs, at the cost of some file size and a learning curve.
Bootstrap: Components and a 12-Column Grid
Bootstrap provides a responsive 12-column grid plus prebuilt components like navbars, cards and modals. You compose layouts with container, row and col-* classes, and responsive variants (col-md-*, col-lg-*) change the column count at breakpoints.
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Column A</div>
<div class="col-12 col-md-6 col-lg-4">Column B</div>
<div class="col-12 col-md-12 col-lg-4">Column C</div>
</div>
</div>In Bootstrap, col-12 means full width on phones, col-md-6 means half width from medium screens up, and col-lg-4 means a third from large screens up — responsiveness baked into the class names.
Tailwind: Utility-First Classes
Tailwind takes a different path: instead of components, it gives you tiny single-purpose utility classes (flex, grid, gap-4, p-6). Responsiveness comes from breakpoint prefixes like md: and lg:, applied directly in your markup.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="p-6 bg-indigo-500 text-white rounded">A</div>
<div class="p-6 bg-pink-500 text-white rounded">B</div>
<div class="p-6 bg-teal-500 text-white rounded">C</div>
</div>grid-cols-1 md:grid-cols-2 lg:grid-cols-3 reads as: one column on mobile, two from medium up, three from large up. The md: and lg: prefixes are Tailwind's built-in breakpoints.
Comparing the Approaches
| Aspect | Bootstrap | Tailwind CSS |
|---|---|---|
| Style | Prebuilt components + grid | Low-level utility classes |
| Responsiveness | col-md-*, col-lg-* variants | md:, lg: prefixes on utilities |
| Customisation | Override via Sass variables | Configure in tailwind.config |
| Look out of the box | Recognisable Bootstrap look | Unstyled; you design it |
| Best for | Fast, conventional UIs | Custom designs, fine control |
Should You Use One?
- Frameworks save time and give battle-tested responsive grids.
- Bootstrap is great when you want ready components fast.
- Tailwind shines for custom designs without leaving your HTML.
- Both add file size; purge or tree-shake unused classes in production.
- For small projects, modern CSS Grid and Flexbox may need no framework at all.
Learn raw CSS Grid and Flexbox first. Frameworks are shortcuts over the same underlying model — knowing the fundamentals makes any framework easier to use and debug.
Key Points
- Frameworks provide tested, responsive building blocks and speed up work.
- Bootstrap uses a 12-column grid and prebuilt components with col-*-* variants.
- Tailwind uses utility classes with md:/lg: prefixes for responsiveness.
- Bootstrap favours convention and speed; Tailwind favours custom control.
- Understand Grid and Flexbox first — frameworks are built on them.