What is Bootswatch?

Bootswatch is a collection of free, drop-in themes for Bootstrap. You use it when you already have a Bootstrap-based site or app and want a different visual style without rewriting your markup or hand-editing color values: you download a theme's CSS file and replace the Bootstrap CSS you were loading. The themes are open source under the MIT License and maintained by the community on GitHub.

How it works

Bootswatch does not replace Bootstrap's components, grid, or JavaScript. It replaces the compiled stylesheet. The site's own description of the workflow is "Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values."

That means your existing classes (btn, card, navbar, alert, and so on) keep working — they just render with the theme's colors, typography, and surface treatment instead.

What you get per theme

Each theme page offers a preview plus a download list. Across the themes shown on the site, the available files are:

Not every theme lists every file — for example, Flatly's listing on the site shows bootstrap.min.css, bootstrap.css, _variables.scss, and _bootswatch.scss without the RTL files — so check the individual theme's download list rather than assuming the full set.

Versioning

Themes are organized by Bootstrap version, and the site exposes a version switcher covering v5.3, v4.6.2, v3.4.1, and v2.3.2, with an "All versions" entry. The current themes are described as "Tuned for 5.3.8" and built for the latest version of Bootstrap, while version 4, 3, 2, and other releases remain available to download.

The practical rule: match the theme's Bootstrap version to the Bootstrap version your project already uses. A theme built for 5.3.x is the right pick for a 5.3.x project; if you are pinned to Bootstrap 4, use the v4.6.2 theme set instead.

Customizing beyond the download

If swapping the CSS file is not enough, the SASS files are the next step. The site states that changes are "contained in just two SASS files, enabling further customization and ensuring forward compatibility" — that is _variables.scss and _bootswatch.scss. Editing variables there and recompiling lets you adjust the theme while keeping your modifications separate from Bootstrap's own source, which makes future Bootstrap upgrades less painful.

Available themes

The theme roster on the site includes: Default, Brite, Cerulean, Cosmo, Cyborg, Darkly, Flatly, Journal, Litera, Lumen, Lux, Materia, Minty, Morph, Pulse, Quartz, Sandstone, Simplex, Sketchy, Slate, Solar, Spacelab, Superhero, United, Vapor, Yeti, and Zephyr.

Each has a one-line character description on the site — for example, Brite is "Neobrutalist form," Cerulean is "A calm blue sky," Cosmo is "An ode to Metro," Cyborg is "Jet black and electric blue," Darkly is "Flatly in night mode," and Journal is "Crisp like a new sheet of paper." These descriptions are the fastest way to shortlist candidates before opening previews.

Integration and updates

• API: An API is available for integrating themes with your platform. The site notes Bootswatch is "in use by NodeBB and many more," so if you are building a platform that hosts themes, the API is the intended path rather than scraping downloads.
• Updates: You can follow releases via RSS feed, Twitter, or the blog.
• Source and license: Themes are released under the MIT License and maintained by the community on GitHub, so forking and shipping modified versions is permitted under those terms.

When Bootswatch is the right choice

Choose it if you want a visibly different Bootstrap look with minimal effort and you are comfortable with the constraint that you are adopting someone else's design decisions wholesale. Skip it, or plan on the SASS route, if your design system diverges far from a theme's palette and typography — at that point you are better off starting from Bootstrap's own SASS and building your own variable set, using Bootswatch themes mainly as reference points.