Theory
Three-across is wrong on a phone
Your FestConnect cards use col-4, three across. On a laptop that is perfect. On a phone, three cards crammed into one row are unreadable postage stamps. You want them to change: one card per row on a phone, two on a tablet, three on a desktop.
The plain col-4 cannot do that; it is three-across on every screen. Bootstrap's fix is to attach a screen-size label to the column, so different sizes get different widths.
Theory
Instructions that start small and scale up
Think of packing advice: 'by default, one item per bag; if you have a bigger bag, two; if huge, three'. Each rule kicks in at a size and stays for everything larger. Bootstrap is mobile-first in exactly this way: the base rule is for the smallest screen, and each breakpoint label says 'from this width up, switch to this'.
Theory
Breakpoints and the 'and up' rule
A breakpoint label sits between col and the number:
- *`col-sm-
** >=576px, **col-md-` >=768px, `col-lg-** >=992px, **col-xl-`* >=1200px.
col-md-6 means 'span 6 columns on medium screens and up'. Below that breakpoint the column falls back to full width and stacks. An unlabelled col-* (like col-12) applies to all sizes and is your mobile base. Stack several labels to change the layout at each size.
Practical
One-up, two-up, three-up cards
<div class="row">
<!-- phone: full width (12). tablet: half (6). desktop: third (4). -->
<div class="col-12 col-md-6 col-lg-4">Robotics</div>
<div class="col-12 col-md-6 col-lg-4">Dance</div>
<div class="col-12 col-md-6 col-lg-4">Coding</div>
</div>
<!-- reading it:
col-12 -> mobile base: 1 per row
col-md-6 -> >=768px: 2 per row
col-lg-4 -> >=992px: 3 per row -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
What shows at 800px wide?
A card is class="col-12 col-md-6 col-lg-4". The browser window is 800px wide. How many of the 12 columns does the card take, and how many cards fit per row? Work it out with the breakpoint numbers.
Show the answer
800px is >=768px (md) but <992px (lg), so the md rule is the largest that applies: col-md-6. The card takes 6 of 12 columns, so 2 cards per row. At 500px it would use the col-12 base (1 per row); at 1000px it would use col-lg-4 (3 per row). Mobile-first means you read from the largest matching label downward.
Quiz
You write `col-lg-4` but no smaller label. What happens on a 500px phone?
- The column stacks to full width, because no rule applies below lg
- It stays a third (4/12), cramped three-across
- The card disappears until the screen is at least 992px
- Bootstrap errors because a base col is required
Show the answer
The column stacks to full width, because no rule applies below lg
col-lg-4 only applies from 992px up. Below that there is no column rule, so it falls back to the mobile-first default: full width, stacked one per row (A). It does not keep the third width below lg (B), nor vanish (C), and no base class is strictly required (D). This is why col-lg-4 alone already behaves reasonably on phones: it just stacks.
Watch out
Responsive grid traps
1. Reading breakpoints backwards: labels mean 'this size and up', not 'only this size'. col-md-6 also applies at lg and xl unless a larger label overrides it.
2. Expecting col-lg-4 to be three-across on a phone: below lg it stacks. If you want a specific small-screen layout, set the base (col-12 or col-6) explicitly.
3. Skipping the viewport meta tag: without it (from the intro lesson) breakpoints never trigger and the phone shows the desktop layout zoomed out.
Theory
This is the whole point of Bootstrap
Responsive columns are why you linked Bootstrap in the first place: one set of classes, and FestConnect reflows from phone to desktop with no hand-written media queries. The next lesson, themes, changes how those same components look (colours and fonts) rather than how they lay out. Layout is done; styling is next.
Summary
Key takeaways
- Add a breakpoint label to the column: col-sm/md/lg/xl-N.
- A label means 'this width and up'; below it the column stacks full width (mobile-first).
- Breakpoints: sm >=576, md >=768, lg >=992, xl >=1200px.
- Stack labels to change layout per size: col-12 col-md-6 col-lg-4 = 1-up, 2-up, 3-up.
- An unlabelled col-N applies to all sizes and is your mobile base; the viewport meta tag must be present.
- Memory hook: rules that start small and scale up.