Grid structure

📖 Theory

Three cards that will not sit side by side

You have three FestConnect event cards: Robotics, Dance, Coding. You want them in a neat row, each taking a third of the width. Stacking <div>s just puts them one under another. Floating them is fiddly and breaks on small screens.

Bootstrap solves layout with a grid: it pretends every row is ruled into 12 equal columns, and you say how many columns each block should span. Three thirds means each card spans 4 of the 12.

📖 Theory

Graph paper, 12 squares wide

Imagine every row of the page as a strip of graph paper exactly 12 squares wide. To place a card, you say how many squares it eats. A half-width card eats 6 squares, a third eats 4, a quarter eats 3. As long as the squares in one strip add up to 12, everything lines up perfectly, because they share the same ruler.

📖 Theory

container, row, col

The grid is three nested layers:

• `.container`: the outer wrapper (centered, responsive width).
• `.row`: a horizontal strip, always 12 columns wide.
• `.col-N`: a child of the row spanning N of the 12 columns.

Inside one row the N values should add up to 12. col-6 + col-6 is two halves; col-4 + col-4 + col-4 is three thirds. A plain .col with no number shares the row equally with its siblings.

⌨️ Practical

Three event cards, one row

<div class="container">
  <div class="row">
    <div class="col-4">Robotics</div>   <!-- 4/12 = one third -->
    <div class="col-4">Dance</div>
    <div class="col-4">Coding</div>
  </div>

  <!-- a half + a half in the next strip -->
  <div class="row">
    <div class="col-6">Schedule</div>
    <div class="col-6">Venue Map</div>
  </div>
</div>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Do the column maths

You want a wide 'featured event' beside a narrow 'sidebar' in one row, and the featured part should be three times as wide as the sidebar. What two col-N classes give that, and do they add to 12?

🧩 Quiz

A row contains col-8, col-6, and col-4 (total 18). What happens on the page?

1. The col-4 wraps onto a new line, because a row holds only 12 columns
2. All three shrink proportionally to fit 12 columns
3. Bootstrap throws an error and shows nothing
4. The extra 6 columns are added, making the row 18 wide

⚠️ Watch out

Grid structure traps

1. col not directly inside row: a .col-4 must be a direct child of a .row. Wrapping it in an extra <div> breaks the alignment and gutters.

2. row not inside a container: rows use negative margins that a container cancels out; a stray row can cause a horizontal scrollbar.

3. Columns summing past 12: they wrap. Sometimes you want that (a gallery), but if a layout 'jumps to the next line unexpectedly', add your column numbers, they exceed 12.

📖 Theory

Next: the same grid, but responsive

Right now col-4 is three-across on every screen, including a phone where that is too cramped. The 'Bootstrap Grids' lesson adds breakpoint versions like col-md-4, meaning 'a third on medium screens and up, full width below'. The 12-column idea you just learned stays identical; you only add a screen-size label.

✅ Summary

Key takeaways

• Bootstrap's grid rules every row into 12 equal columns.
• Nest: .container > .row > .col-N, with col a direct child of row.
• col-N spans N of 12: col-6 = half, col-4 = third, col-3 = quarter.
• Column numbers in a row should add up to 12; going over 12 wraps to a new line.
• A plain .col with no number splits the row equally among its siblings.
• Memory hook: graph paper, 12 squares wide.