How to Install a Bootswatch Theme into Your Bootstrap Project

Updated

Bootswatch themes drop into a Bootstrap project by replacing Bootstrap's compiled CSS with the theme's CSS file. Download the theme's bootstrap.css (or bootstrap.min.css) from bootswatch.com, swap it for the Bootstrap CSS you already reference, and the theme's colors, typography, and component styling take effect — no hex-value editing required. This works with the Bootstrap version the theme targets (themes on the site are built for Bootstrap 5.3.8, with version 4, version 3, version 2, and other releases also available to download).

What you get when you download a theme

Each theme page offers the same set of files:

File Purpose
bootstrap.css Full, readable compiled theme CSS
bootstrap.min.css Minified version for production
bootstrap.rtl.css Right-to-left variant
bootstrap.rtl.min.css Minified RTL variant
_variables.scss SASS variables for customization
_bootswatch.scss Theme-specific SASS overrides

The CSS files are complete Bootstrap builds, not add-ons. That's why the install is a replacement rather than an addition.

Install steps

  1. Pick a theme and version. On bootswatch.com, choose a theme (for example 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, or Zephyr) and confirm the Bootstrap version you're running matches the theme's version.
  2. Download the CSS file. Use bootstrap.min.css for production or bootstrap.css if you want to read and tweak the output.
  3. Replace your existing Bootstrap CSS. Point your HTML <link> at the downloaded file instead of the stock Bootstrap CSS, or overwrite the file in your build output. The theme CSS contains the full Bootstrap framework, so you don't keep both.
  4. Verify. Reload the page. Buttons, navbars, forms, and typography should now reflect the theme. If nothing changed, you're still loading the old Bootstrap CSS somewhere — check for a second <link> tag or a cached copy.

If your project uses a bundler or SASS pipeline, you can instead import _variables.scss and _bootswatch.scss after Bootstrap's own SASS. The site notes that changes are contained in just two SASS files, which keeps customization manageable and helps with forward compatibility.

Choosing between the CSS and SASS routes

  • CSS replacement is the fastest path and needs no build tooling. Use it when you want the theme as-is.
  • SASS route is worth it when you need to override variables (brand colors, spacing, font stacks) before compiling. You get one place to make changes instead of editing generated CSS.

Common snags

  • Version mismatch. A theme built for Bootstrap 5.3.8 won't line up cleanly with a v4 or v3 project. Match the theme version to your Bootstrap version, or download the theme release for your Bootstrap line.
  • Two Bootstrap CSS files loaded. The most frequent cause of "the theme didn't apply" is a leftover stock Bootstrap stylesheet loading after the theme.
  • RTL projects. Use bootstrap.rtl.css or bootstrap.rtl.min.css rather than the LTR file.
  • Caching. Hard-refresh or bust the cache after swapping the file.

Licensing and integration

Bootswatch themes are released under the MIT License and maintained by the community on GitHub, so commercial and personal use is permitted under those terms. An API is available for integrating themes with your platform, and the themes are in use by NodeBB and others. Updates are announced via RSS feed, Twitter, and the blog if you want to track new releases.