Responsive Design Complete Guide
Responsive design is the practice of making one layout work correctly on a phone, a tablet, and a desktop monitor without shipping three different sites. CSS media queries give you full, hand-written control over exactly when a layout changes and how, while Bootstrap's grid system gives you a fast, consistent, mobile-first layout system so you're not hand-rolling breakpoints for every single page. This doc walks through both halves — the raw CSS techniques and the Bootstrap tooling built on top of them — in the order you'd actually learn them, with a diagram, a "where to use it" guide, and concrete implementation steps for each of the 8 topics below.
Use the sidebar to jump straight to any topic — each one opens its own page with a full explanation, a diagram of how it fits together, and the concrete steps to put it into practice. Work through CSS Fundamentals first: mobile-first thinking and media queries are the foundation everything in Bootstrap is quietly built on top of.
This is mobile-first design: the base stylesheet targets the smallest screen with no media query at all, and every breakpoint above it only adds rules — it never has to fight or undo what came before. The same HTML, the same CSS file, three different rendered results depending on viewport width.
All 8 topics in this guide
Summary & Patterns
Once each topic makes sense on its own, these references tie them together: the order to learn them in, how Bootstrap's grid actually behaves across breakpoints, and the single habit worth internalizing above all others.
Recommended Learning Order
Recommended Priority
Key Pattern — Bootstrap's 12-Column Grid Across Breakpoints
The single most useful thing to internalize about Bootstrap's grid: the same row of columns can be told to behave completely differently at each breakpoint, using nothing but a class name.
Nothing about the HTML changes between these three renderings — only the responsive class suffix does. .col-lg-4 means "take 4 of 12 columns once the viewport reaches lg," and every column falls back to full width (.col-12, the implicit default) below the smallest breakpoint you specify. Design mobile-first: start from the stacked version and add -md-/-lg- overrides as the screen grows.
Official Documentation Reference URLs
Every topic covered in this guide, with a direct link to its official docs.