Skip to example
ISOLATED LIBRARY EXAMPLE / REAL BOOTSTRAP

You can start with a library.

This page really loads Bootstrap's CSS and JavaScript bundle. It demonstrates responsive columns, styled cards, a call-to-action and a native Bootstrap accordion without adding React or a client-side router.

Network boundary: Only this optional teaching page loads Bootstrap from a version-pinned CDN with Subresource Integrity. The rest of the site has no Bootstrap runtime dependency. For an offline project, download and serve a licensed, pinned distribution locally instead.

The grid and card classes

Pattern 1

The responsive grid

A col-12 fills a narrow row; col-md-6 spans half of it at medium widths. Try resizing the browser.

Compare native CSS Grid
Pattern 2

Consistent components

card, card-body and btn provide coordinated defaults you can theme or replace.

Compare design systems
Pattern 3

Practical accessibility

Bootstrap provides some accessible patterns, but your copy, contrast, input labels and testing are still your responsibility.

Explore accessibility

The optional JavaScript component

No. The modern Bootstrap distribution works on an ordinary HTML page. Its JavaScript plugins do not require React or jQuery.

No. Bootstrap styles semantic HTML and supplements interaction; the browser still needs meaningful structure, labels, links and controls.

Read the source to learn the technique.

Open this document in your browser's View Source or developer tools. The two pinned tags in the <head> load actual Bootstrap from jsDelivr. Classes on the cards and buttons invoke that library's styles. The data-bs-toggle and data-bs-target attributes connect a Bootstrap JavaScript accordion to its panels.

Bootstrap versions change. Treat the explicit version as an example snapshot, check the current official docs and update the file and integrity values together before deploying a production app.

Bootstrap's official download and integrity guidance · Back to the origins exhibit