Responsive design and the 12-column grid

What you will learn

• why pages must be responsive, and the viewport meta tag
• what a CSS framework gives you, and how to add one
• the grid: .container, .row and .col-* classes that add up to 12
• breakpoints: col-sm, col-md, col-lg, col-xl

Understand the idea

People open websites on phones, tablets, laptops and big monitors. A responsive page adapts to the width of the screen instead of forcing everyone to zoom and scroll sideways. It starts with one line in the head: <meta name="viewport" content="width=device-width, initial-scale=1">, which tells phones to use their real width. Designers work mobile first: make the small-screen layout simple and single-column, then add rules for wider screens.

A CSS framework is a ready-made stylesheet of classes for common jobs, so you do not write the same CSS for every project. Bootstrap 4, used in this module, is the best known. In a real page you add it with one <link> to its stylesheet (see the example). Here a small built-in version with the same class names runs in the preview, so you can practise without installing anything.

The layout system is a grid of twelve columns. Put a .container around the page content (it centres it and sets side padding), put a .row inside it, and put columns inside the row. A column class says how many of the 12 columns it should take: .col-6 takes half the row, .col-4 takes a third, and the columns in one row should add up to 12 (more than 12 wraps onto a new line).

The size name in the class says from which screen width the columns sit side by side: col-sm-* from 576px, col-md-* from 768px, col-lg-* from 992px and col-xl-* from 1200px in the real framework. Below that width the columns stack, one per line, so .col-md-4 means "a third wide on tablets and up, full width on phones". The preview is narrow, so its steps are shrunk to fit.

The preview has a small built-in version of the framework with the same class names, and its screen-width steps are shrunk to fit the narrow preview (the real ones are 576, 768, 992 and 1200 pixels).

Example

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4"><h3>One</h3><p>First column.</p></div>
      <div class="col-md-4"><h3>Two</h3><p>Second column.</p></div>
      <div class="col-md-4"><h3>Three</h3><p>Third column.</p></div>
    </div>
  </div>
</body>
</html>

Your turn: code to type and practise

Inside a div with class container, build a div with class row that holds three div columns with class col-md-4, each containing an h3 heading and a paragraph.

← Display and positionTypography classes →