Bootstrap introduction

📖 Theory

Making FestConnect fit a phone, by hand

FestConnect looks fine on your laptop. On a phone the event cards spill off the screen and the buttons are tiny. To fix it by hand you would write dozens of CSS rules with media queries for each screen size, test on three devices, and repeat for every page.

Thousands of sites need the same grid, buttons, and cards. So someone wrote all that CSS once, tested it everywhere, and gave it away. That library is Bootstrap.

📖 Theory

A box of ready-cut furniture

Building a room, you could saw every plank yourself, or buy flat-pack furniture that already fits together. Bootstrap is the flat-pack: prebuilt buttons, cards, grids, and alerts. You do not describe how a button looks, you just label an element btn btn-primary and the ready-made style snaps on. Your job shifts from writing CSS to choosing the right pieces.

📖 Theory

What Bootstrap is, formally

Bootstrap is a free, open-source front-end framework: a large external CSS file (plus some JavaScript) of prewritten styles you apply through class names. Two facts define how you use it:

• It is class-based: you add classes like container, row, btn, alert to plain HTML.
• It is mobile-first: styles target small screens first and scale up, so pages are responsive by default.

It is not a new language; it is CSS someone else wrote and you link in.

⌨️ Practical

Adding Bootstrap to FestConnect

<head>
  <!-- 1. Required for responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 2. Bootstrap's CSS, from a CDN (external CSS, Unit 1 pattern) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <!-- 3. Wrap content in a container -->
  <div class="container">
    <h1>FestConnect</h1>
    <button class="btn btn-primary">Register</button>
  </div>

  <!-- 4. Bootstrap's JS, for interactive bits, before </body> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
</body>

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

💭 Think first

Where does the styling actually come from?

You wrote no CSS for that Register button, yet it is blue with padding and rounded corners. Where did those styles come from, and which Unit 1 method is this? Answer before tapping.

🧩 Quiz

A student links Bootstrap but the page still does not shrink or reflow on a phone. What is the most likely missing piece?

1. The <meta name="viewport"> tag, which responsive layouts require
2. A second copy of the Bootstrap link
3. The autocomplete attribute on the body
4. Nothing: Bootstrap cannot make a page responsive

⚠️ Watch out

Two setup mistakes

1. No viewport meta tag: the single most common reason 'Bootstrap is not responsive'. It must be in the <head>.

2. No container: dumping content straight in <body> makes it stretch edge to edge with no margins. Bootstrap's grid also expects to sit inside a .container or .container-fluid. Wrap first, then build.

📖 Theory

Every framework after this works the same way

The pattern 'link a big prewritten stylesheet, then apply its class names' is how nearly every CSS framework works. Once you can read Bootstrap's docs and pick the right class, you can pick up Tailwind or a component library later with the same habit. FestConnect will be fully rebuilt with these classes over the next seven lessons.

✅ Summary

Key takeaways

• Bootstrap is a free front-end framework: prewritten external CSS (plus some JS) applied through class names.
• Add it with a <link> to its CDN CSS in the head, and a <script> before </body> for interactive components.
• It is mobile-first and responsive, but only if the viewport meta tag is present.
• Wrap content in .container (centered, responsive) or .container-fluid (full width).
• It is class-based CSS, not a new language; you can override it with your own CSS loaded after.
• Memory hook: flat-pack furniture, you just pick the pieces.