🅱️ Class 9 — Welcome to Bootstrap

Topic 3 · Bootstrap Framework — Your introduction to the world's most popular CSS framework

What is Bootstrap?

Bootstrap is a free, open-source CSS framework that lets you build responsive, mobile-first websites fast. Instead of writing every CSS rule yourself, you use Bootstrap's pre-built classes for layouts, buttons, forms, navigation, and more.

Why use Bootstrap?

Speed — go from blank file to polished page in minutes
Responsive by default — works on phones, tablets, and desktops out of the box
Industry standard — used on a huge percentage of websites; you'll see it in jobs
Consistent design — every component already follows good design rules
Easy to customise — override its defaults to make it your own

Setting Up Bootstrap

Two ways to get Bootstrap into your project. The CDN method is fastest:

Option 1 · CDN (recommended for learning)

Add these two lines to your HTML — one in <head>, one before </body>:

<!-- in <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Option 2 · Download

Download Bootstrap from getbootstrap.com, unzip, and link the local files. Useful when you need to work offline.

The Bootstrap Grid System

The grid is how Bootstrap structures every layout. Three building blocks:

.container
Holds your layout. Fixed max-width.

.row
A horizontal row inside a container.

.col-*
A column inside a row. 12-column grid.

<div class="container">
  <div class="row">
    <div class="col-md-6">Left half</div>
    <div class="col-md-6">Right half</div>
  </div>
</div>

Responsive Breakpoints

The number after col- tells Bootstrap when to apply that width. Bootstrap has 5 breakpoint sizes:

xs — extra small (phones, < 576px) — implicit, no prefix
sm — small (≥ 576px)
md — medium (≥ 768px, tablets)
lg — large (≥ 992px, laptops)
xl — extra large (≥ 1200px, desktops)

See the Bootstrap Breakpoints reference (PDF) for the full chart.

Bootstrap Components We'll Use Most

Navigation — navbars, navs, tabs
Buttons & button groups
Forms — inputs, selects, checkboxes, radio buttons
Alerts, badges, progress bars
Cards & media objects
Modals & tooltips
Carousels — image sliders

Bootstrap Utilities

Utilities are tiny single-purpose classes you stack to get exactly the look you want. Some essentials:

Spacing — m-3, p-2, mt-4 (margin/padding)
Display — d-none, d-flex, d-md-block
Flexbox — justify-content-between, align-items-center
Typography — fs-3, fw-bold, text-center
Backgrounds & colours — bg-primary, text-light
Responsive — d-md-none (hide on tablet+)

Customisation & Theming

Bootstrap's default look is great for prototyping but every real project should be customised. You can:

Override Bootstrap variables with Sass
Add your own CSS file after Bootstrap to override styles
Use third-party themes (Bootswatch, etc.)

Best Practices

✅ Always include the responsive viewport meta tag in <head>
✅ Use semantic HTML — Bootstrap doesn't replace good structure
✅ Mobile-first: test on phones before tablets/desktops
✅ Add accessibility attributes (aria-label, alt text)
✅ Don't load every component — only use what you need

What We're Building Toward

Over the next few classes you'll build a complete Bootstrap site — Skywings, a luxury resort website. You'll use the grid, navbars, cards, carousels, and forms to build something that looks professional and works on every screen size.

💡 The big idea: Bootstrap is a vocabulary. The more classes you recognise, the faster you can read and build. Spend time browsing the docs even when you're not coding — it's the fastest way to level up.

🔗 References

Bootstrap 5.3 Official Docs

W3Schools Bootstrap 5 Tutorial

Bootstrap Breakpoints (official)

Bootstrap Breakpoints reference (PDF)

Class 9 — Equinim College · Front End Web Development · 26B