twbs/examples and the shortest path to a working Bootstrap build

Ten directories, one question each

The repository is a directory of functional examples, and the directory list is the documentation.

There is Starter, which is the simplest case, CDN links for the CSS and JavaScript with no build step at all. Then Sass and JS, which imports Sass, Autoprefixer, Stylelint and the Bootstrap JavaScript bundle via npm. Sass and ESM JS is a variation that imports Sass, Autoprefixer and Stylelint through npm and then loads the ESM JavaScript with a shim, which is the configuration you need if you want the newer module build of the Bootstrap script.

Color modes is built on top of the Sass and ESM JS example and adds color mode support with a color mode picker, which is the feature that most often needs a working reference implementation. Bootstrap Icons font compiles Sass and Stylelint and uses PurgeCSS along with the icon font.

Then the bundler-specific ones. Parcel covers Sass and JS via Parcel, Vite covers Sass and JS via Vite, Vue covers Sass and JS via Vue with Vite, and Webpack covers importing and bundling Sass and JS with Webpack. The last entry is PurgeCSS, importing Sass with PurgeCSS and JavaScript via npm, and there is no directory for it in the top-level listing, which is a small inconsistency in an otherwise careful list.

Each of these is a working project rather than a code fragment, so the way to use the repository is to open the one directory matching your stack and read the configuration files.

The repository tracks the v6 alpha, with v5 on another branch

The most important fact about this repository is stated in a callout box at the top of the README: the examples use the Bootstrap v6 alpha, and for Bootstrap 5 examples you should look at the v5-dev branch.

That branch split is the practical detail. If your project is on Bootstrap 5, the examples on main are not a reference for you, and the v5-dev branch holds a separate React example among others. The branch names are visible in the links the README gives for the React and v5-dev paths, so the split is maintained rather than accidental.

The React example is the one gap in the current branch. The README states that the React example is temporarily unavailable because React Bootstrap does not support Bootstrap v6 yet, and that its Bootstrap 5 version is on v5-dev. That is a dependency problem rather than a policy one, and it tells you something useful about the general shape of the repository: every example depends on the surrounding ecosystem catching up with the new Bootstrap version.

The repository is not archived, the last push was on 2026-10-09, and it publishes no GitHub releases. So there is no versioned snapshot to pin to. What you get is the current state of main, which tracks the current alpha.

Color modes and PurgeCSS are the two configurations worth copying

Most of the directories answer a question you already know the answer to. Two of them answer questions that are genuinely hard to get right from scratch.

The Color modes example is built on the Sass and ESM JS example, and it adds a color mode picker. Color mode support in Bootstrap means the stylesheet carries variables for a set of color modes, and the page needs a way to switch between them, which is a piece of JavaScript and a piece of Sass configuration working together. The example directory is the shortest path to a working version of that.

The Bootstrap Icons font example is the other one, because it covers a chain of four tools: importing and compiling Sass, Stylelint, PurgeCSS, and the icon font itself. Icons are usually the first thing to break in a PurgeCSS setup, because the purge scanner has to see the class names in the markup, and a font file loaded through a bundler needs its own handling. Getting that working in one directory you can read beats debugging it in your own project.

The PurgeCSS entry on its own is the counterpart to that, showing the same purge step with the JavaScript coming from npm. Two directories for one tool is deliberate: one shows the icon font case, the other does not.

A private package with one preview script

The root package.json is small and tells you how the examples are consumed rather than developed as a library:

    "build:preview": "node scripts/build-preview.mjs --install"

The package is named bootstrap-examples, marked private, at version 0.0.0, and licensed MIT. It has exactly one script, build:preview, which runs a node script from the scripts directory with an install flag.

The netlify.toml at the root indicates the examples are published as a site, which fits a repository whose purpose is demonstration rather than consumption. There is no publish configuration, no build matrix, and no test command, because there is nothing here to publish or test. Each example directory carries its own dependencies and its own configuration.

The consequence for a reader is that this repository has no top-level install step. You do not clone it and run npm install at the root to get a working environment. You open the directory for the tool you use, look at its package.json, its bundler config and its Sass entry point, and copy that pattern into your own project. The root package.json and the preview script exist for the maintainers who publish the site, not for you.

What this repository is not

It is worth being explicit about the boundary, because the name suggests more than the content delivers.

There is no guidance on which approach to choose. The directory list tells you the examples that exist, not why you would pick Vite over Parcel over Webpack, and it says nothing about what the tradeoffs are between the Sass and ESM JS setup and the simpler Sass and JS one. If your question is which bundler to use, this repository will not answer it.

There is also no prose about the JavaScript components. Bootstrap's JavaScript is a set of interactive behaviours, and how you import them differs between the bundled script and the ESM build, but the repository does not walk through the differences. It shows the wiring, not the semantics.

Most importantly, none of this is documentation of Bootstrap itself. The README links out to the Bootstrap docs for the v6 alpha, and that is where the component reference, the theming documentation and the accessibility guidance live. This repository is a set of starting points that you copy from, and the real documentation is somewhere else entirely.

The MIT licence applies to the example code in the repository. The licence of Bootstrap itself is a separate question, and the README only states that this repository is licensed under the MIT License.

Editorial conclusion

twbs/examples is a good fit for a developer who has just started a project with Webpack, Vite, Parcel or Vue and needs Bootstrap's Sass and JavaScript wired up correctly, because each directory is a complete, runnable example rather than a snippet, and the Colour modes and Bootstrap Icons font examples cover the two configurations that most often go wrong. It is a poor fit if you need a stable reference, since the main branch tracks the Bootstrap v6 alpha and the Bootstrap 5 examples live on a separate v5-dev branch, and a poor fit if you want explanation rather than working code, because the repository has no prose documentation. Before adopting, check which Bootstrap major version your project targets, then read the directory listing of the bundler you use and copy only that example rather than the whole repository.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. twbs/examples on GitHub