RWD Using a CSS Framework
CSS frameworks like Bootstrap ship a ready-made responsive grid and a library of components, so you can assemble a mobile-friendly layout without hand-writing every media query.
What a Framework Actually Gives You
A CSS framework bundles three things you'd otherwise build yourself: a reset that makes browsers agree on default spacing, a responsive grid system for laying pages out in columns, and a set of pre-styled components -- buttons, navbars, cards, forms -- that already look consistent and already respond to different screen sizes. Bootstrap is the best-known example, though Tailwind CSS, Foundation, and Bulma solve similar problems with different philosophies.
Adding Bootstrap via CDN
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- your markup goes here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Bootstrap's Grid System, Briefly
Bootstrap's layout system is built on a 12-column grid, which just means every row is treated as if it's divided into 12 equal slots, and each element declares how many of those slots it should occupy. A .container centers your content and caps its width at each breakpoint; a .row inside it is a flex wrapper that lays its children out side by side and cancels the container's edge padding; and .col-* classes on the children each claim a number of the 12 columns. This site has a dedicated Bootstrap tutorial if you want to go deeper into its components and utilities -- here the focus is just how the grid supports responsive design.
A Simple Bootstrap Row
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4">Column A</div>
<div class="col-12 col-sm-6 col-md-4">Column B</div>
<div class="col-12 col-sm-12 col-md-4">Column C</div>
</div>
</div>
</body>
</html>Reading that markup mobile-first: col-12 means each column takes all 12 slots -- the full row width -- by default, so on a phone the three columns stack vertically. col-sm-6 overrides that from 576px up, giving columns A and B six slots each (half the row, side by side), while column C still claims all 12 (its own full-width row) until col-md-4 kicks in at 768px and gives all three columns four slots each, so they finally share one row evenly.
Weighing the Trade-off
- Faster to start: a working, cross-browser-tested responsive layout in minutes instead of days.
- Consistency for free: spacing, typography, and component states already match across the whole site.
- Extra weight: you ship CSS (and sometimes JavaScript) for components you never actually use, unless you take the time to build a custom, trimmed-down bundle.
- Generic look: sites that skip theming can end up visually indistinguishable from thousands of other Bootstrap sites.
- A class-naming convention to learn: col-md-4, g-3, d-flex and similar utility classes are a small language of their own.
