ORIGINS STUDIO / FRAMEWORKS

Use Bootstrap directly.

The original example taught how to use Bootstrap directly: include the actual toolkit, use its classes and see how much a static HTML page can do with established components.

Actually use Bootstrap in an HTML file.

Bootstrap works without React or a client-side router. The separate working starter loads official, version-pinned Bootstrap CSS and a JavaScript bundle with integrity hashes. Resize its responsive grid; try its buttons, cards and accordion.

Open the real Bootstrap starter ↗

Separating the actual library demo keeps this Origins exhibit self-contained and readable without a network connection. The optional starter is intentionally connected to a specific CDN release, so its library imports need periodic review. For long-term offline examples, vendor a licensed version-pinned library build.

The same promise, two routes.

These two working buttons demonstrate the idea, not the actual Bootstrap runtime. The first resembles a framework's conventional button style; the second uses the field guide's own design tokens. Both use the same semantic <a> element because their purpose is navigation.

Framework convention

Bootstrap gives you established styles, grid utilities and optional JavaScript components that work together.

Learn about Bootstrap

<a class="btn btn-primary"
   href="guide.html">
  Learn more
</a>

The snippet shows Bootstrap's class convention; the demonstration is locally styled.

A bespoke system

Custom CSS tokens make room for a different visual language, with responsibility for continued maintenance.

Explore native CSS

<a class="button button-primary"
   href="guide.html">
  Learn more
</a>

The second link uses a project-specific naming and styling system.

Then and now: The original Bootstrap 4 example loaded a CDN stylesheet and script plus remote photos. This reproduction has no Bootstrap runtime dependency. For a real Bootstrap project, follow the officially supported release's installation instructions, pin its version, and budget for updates.

Why does the actual library example live on another page?

The Origins studio is intended to survive without any CDN. The dedicated, optional starter demonstrates the real Bootstrap integration, so it can be updated deliberately without making the main educational site depend on the CDN.

Why this experiment matters

Bootstrap shows why developers use libraries: consistent component patterns, responsive primitives and less repeated work. Tailwind, Material UI, Fluent UI and headless libraries make different tradeoffs.

What to consider before using it

A framework is not a WCAG certificate, and a component library is not interchangeable with an architectural framework. Verify versions, documentation, dependencies and actual keyboard behavior.