Bootstrap Essentials

Bootstrap is the most widely deployed CSS framework: a component library plus a utility layer on a responsive grid. This lesson covers what it gives you, what it costs, and how to adopt it without giving up the CSS you learned in this track.

What Bootstrap is

Three layers in one package

Reboot — a normalized baseline (the same job as your @layer reset).
Grid and utilities — a 12-column responsive grid plus single-purpose classes (d-flex, mt-3, text-center).
Components — prebuilt buttons, cards, modals, navbars, with optional JavaScript behaviors.

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

<div class="container py-4">
  <h1 class="display-6">Bootstrap Page</h1>
  <div class="row g-3">
    <div class="col-md-6">
      <div class="card p-3">
        <button class="btn btn-primary">Primary Action</button>
      </div>
    </div>
  </div>
</div>

Read the class names against this track's vocabulary: row/col-md-6 is a grid, d-flex is display: flex, py-4 is a padding-block scale. Bootstrap is not a different language — it is a prebuilt architecture.

Trade-offs

Advantage	Cost
Fast prototyping with a consistent baseline	Design converges on the Bootstrap look unless you theme it
Extensive documentation and ecosystem	Payload: the full bundle is large; unused rules ship unless you purge or Sass-trim
Responsive utilities are battle-tested	Class-heavy markup couples presentation into every template
Accessible components when used as documented	JS-dependent components add behavior you must review

When to reach for it

You need a working admin, dashboard, or internal tool immediately.
The team already knows the framework — onboarding cost is real.
The design can look like Bootstrap; heavy custom branding fights the framework.
Learn raw CSS first anyway: debugging a Bootstrap page requires the cascade, box-model, and flex/grid knowledge from this track.

Adopting it without losing your CSS

Theme with variables, not overrides

/* Bootstrap 5 exposes its design tokens as custom properties.
   Theme by REDEFINING them - do not fight specificity. */
:root {
  --bs-primary: oklch(0.55 0.2 262);   /* your brand instead of Bootstrap blue */
  --bs-border-radius: 0.5rem;
  --bs-body-font-family: system-ui, sans-serif;
}

/* Your own styles live in your own file, layered above the framework */
@layer bootstrap, components;   /* declare your layer above the framework's */
@import url("bootstrap.min.css") layer(bootstrap);

Load only the grid and utilities you use (Sass trimming or a purge step).
Keep custom CSS in a separate file with its own cascade layer — never edit vendor files.
Use utilities for layout one-offs; use your own component classes for anything repeated.

Practice: bootstrap or not?

The task

Rebuild one page twice — once with Bootstrap utilities only, once with your own layered CSS from the Architecture lesson — and compare the markup, the stylesheet size, and the effort.

The checklist

Map five Bootstrap classes to the raw CSS they generate (dev tools shows the source rules).
Re-theme the primary color via --bs-primary and confirm no specificity fight was needed.
Decide, and write down, the criteria your project would use to adopt or reject a framework.