bootswatch.com

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.

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:

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.

Pick the theme whose visual character matches your product's tone, then confirm it ships for your Bootstrap version. Bootswatch offers 25 free themes, each with a one-line personality: Cerulean is "a calm blue sky," Cyborg is "jet black and electric blue," Flatly is "flat and modern," Darkly is "Flatly in night mode," and Brite is a "neobrutalist form." Every theme page has a Preview link, so you can see the full component set before committing. Themes are built for Bootstrap 5.3.8, with version 4, 3, and 2 also available to download.

Match the theme to your project's tone

The fastest way to decide is to start from the feeling you want, not from the theme name. The table below groups themes by the impression they create, using the descriptions Bootswatch itself provides.

A few practical notes on this grouping:

• Dark themes are not interchangeable. Cyborg leans electric and high-contrast, while Darkly is a dark recolor of Flatly's flatter aesthetic. If you want dark mode without a dramatic shift in layout feel, Darkly is the safer starting point.
• "Flat" themes suit dashboards and admin panels. Flatly, Cosmo, and Litera reduce shadows and gradients, which keeps dense UI readable.
• Novelty themes carry a cost. Brite, Sketchy, and Vapor make a strong statement; they work well for portfolios, landing pages, or side projects but can fight with enterprise branding.
• Preview before you decide. Every theme listing includes a Preview link showing real Bootstrap components (buttons, forms, navbars, cards) in that theme. This is the single most reliable way to judge fit.

Confirm the theme supports your Bootstrap version

Bootswatch themes are version-specific. The site lists Bootstrap v5.3 (current, with themes tuned for 5.3.8), v4.6.2, v3.4.1, and v2.3.2. A theme built for Bootstrap 5 will not drop cleanly into a Bootstrap 4 project, because class names and component markup changed between major versions.

Before downloading, check two things:

1. Your project's Bootstrap major version. If you are on 5.x, use the current themes. If you are pinned to 4.x for legacy reasons, switch the version selector to v4.6.2 and pick from the themes offered there.
2. Whether the theme exists for that version. Not every theme is available across all versions. The version selector on the site filters the list, so choose your version first and then browse.

Understand what you get when you download

Each theme's download panel offers the same set of files, which tells you how deep you can go with customization:

• bootstrap.css and bootstrap.min.css — the full compiled theme, ready to drop in.
• bootstrap.rtl.css and bootstrap.rtl.min.css — right-to-left variants for RTL languages.
• _variables.scss and _bootswatch.scss — the two SASS files that contain all of the theme's changes.

The SASS structure matters for your decision. Because changes are contained in just two files, you can customize further without forking the whole framework, and the separation keeps the theme forward-compatible with future Bootstrap releases. If you plan to tweak colors, spacing, or typography, choose a theme whose SASS you are willing to edit — a theme you love visually but can't adjust may be worse than a slightly plainer one you can tune.

A quick decision path

1. Filter by Bootstrap version first. Set the selector to your project's version so you only see compatible themes.
2. Shortlist two or three themes by tone using the table above.
3. Open each Preview and look specifically at the components you use most — forms, tables, navbars, alerts.
4. Download the CSS for your favorite and drop it in, replacing the Bootstrap CSS file. No hex-value editing is required for a basic swap.
5. If you need changes beyond colors, edit _variables.scss and _bootswatch.scss rather than overriding the compiled CSS.

Common sticking points

• Assuming "free" means "no license terms." Bootswatch themes are released under the MIT License and maintained by the community on GitHub, so you can use them commercially, but you should still confirm the license text if your organization has strict open-source policies.
• Mixing versions. Downloading a Bootstrap 5 theme into a Bootstrap 4 project is the most common source of broken layouts.
• Skipping the preview. Theme names are evocative but not precise; two "dark" themes can look very different in a real form or table.
• Ignoring RTL needs until late. If your product supports right-to-left languages, confirm the theme ships RTL files (most listed themes do) before you build around it.

If you want to integrate themes programmatically rather than by hand, Bootswatch notes that an API is available for platform integration and is used by projects such as NodeBB. For updates, the site offers an RSS feed, Twitter, and a blog.

Bootswatch themes are customized by editing two SASS files: _variables.scss and _bootswatch.scss. Download those two files alongside the theme's compiled CSS, change the values you need, and recompile. This works for any theme on the site and is the approach Bootswatch itself documents, because all of a theme's changes are contained in those two files rather than scattered across the full Bootstrap source.

What you get in a theme download

Each theme page on bootswatch.com offers the same set of files:

The compiled CSS is what you use if you only want the theme as-is. The two SASS files are what you use if you want to change it.

The customization workflow

1. Download the theme's SASS files. Grab _variables.scss and _bootswatch.scss from the theme page (for example, Cerulean, Cosmo, or Flatly).
2. Set up a SASS build. You need Bootstrap's own SASS source plus a compiler. Bootswatch themes are built against a specific Bootstrap version — the site currently lists v5.3.x as the default, with v4.6.2, v3.4.1, and v2.3.2 also available. Match your Bootstrap source version to the theme version you downloaded.
3. Edit _variables.scss. This is where colors, fonts, border radii, spacing, and most other design tokens live. Changing a variable here propagates through every component that uses it.
4. Edit _bootswatch.scss if needed. Use this for rules that aren't expressible as a variable change — component-specific tweaks, extra selectors, or overrides that don't map to a Bootstrap variable.
5. Recompile. Your build produces a new bootstrap.css that includes both Bootstrap and your theme changes.
6. Verify. Load a page using the new CSS and check the components you changed, plus a few you didn't, to confirm nothing broke.

Why the two-file split matters

Bootswatch keeps changes in just two SASS files specifically so that customization stays manageable and forward-compatible. If you edit the compiled CSS directly, your changes are lost the moment you upgrade Bootstrap or switch themes. If you edit Bootstrap's own source files, you can't easily tell your changes apart from upstream code when a new Bootstrap release arrives.

By confining everything to _variables.scss and _bootswatch.scss, an upgrade becomes: take the new Bootstrap source, keep your two edited files, recompile. The theme's design intent is preserved and your modifications sit on top of it.

Choosing between variable edits and _bootswatch.scss edits

• Use _variables.scss when the change maps to an existing Bootstrap variable — brand colors, font family, border radius, container widths. This is the cleaner path and survives Bootstrap upgrades best.
• Use _bootswatch.scss when you need a rule that has no variable equivalent, or when you're adjusting something the theme author styled directly. Changes here are more likely to need review after a Bootstrap major-version bump.

If you're unsure which file a change belongs in, start with _variables.scss. If the variable you need doesn't exist, that's the signal to move to _bootswatch.scss.

Practical notes

• Themes are released under the MIT License and maintained by the community on GitHub, so you can fork a theme and publish your own variant if the two-file approach isn't enough.
• An API is available for integrating themes with a platform, used by projects like NodeBB. If you're building a tool that needs to serve themes programmatically, that's the route rather than manual file downloads.
• Updates are announced via RSS, Twitter, and the Bootswatch blog — worth following if you've customized a theme and want to know when the upstream files change.
• The site's own theme toggle (light/dark) is a browsing convenience, not a customization feature; it doesn't affect the files you download.

Common sticking points

• Version mismatch. Compiling a v5.3.x theme against Bootstrap v4 source will fail or produce broken output. Check the version selector before downloading.
• Editing compiled CSS. It works until the next upgrade, then your changes vanish. Always keep the SASS files as the source of truth.
• Forgetting _bootswatch.scss. If a variable change doesn't take effect, the theme may be setting that property directly in _bootswatch.scss, which overrides the variable. Check there before assuming the build is broken.
• No build step at all. If you don't want to run SASS, you're limited to the precompiled CSS and can only override it with additional CSS loaded afterward — a valid approach, but not the customization path Bootswatch is designed around.

Bootswatch hosts a gallery of free Bootstrap themes, and you can browse all of them from the homepage. Each theme card shows a short style description, a Preview link, and download links for the compiled CSS and SASS source files. Themes are built for Bootstrap 5.3.8, with version 4, version 3, version 2, and other releases also available to download.

What you'll find on the Bootswatch homepage

The site presents every theme as a card in a single scrolling list. Each card contains:

• Theme name — 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, and Zephyr.
• A one-line style description — such as "Neobrutalist form" for Brite, "A calm blue sky" for Cerulean, "An ode to Metro" for Cosmo, "Jet black and electric blue" for Cyborg, "Flatly in night mode" for Darkly, or "Flat and modern" for Flatly.
• A Preview link — opens a live demo of the theme applied to Bootstrap components.
• Download links — bootstrap.css, bootstrap.min.css, bootstrap.rtl.css, bootstrap.rtl.min.css, _variables.scss, and _bootswatch.scss. Note that some themes, such as Flatly, list only bootstrap.css and bootstrap.min.css alongside the SASS files.

The homepage heading reads "Free themes for Bootstrap," and the list is the primary way to see everything available at a glance.

Previewing a theme before you commit

Clicking Preview on any theme card loads a demo page that shows how that theme renders standard Bootstrap elements — buttons, forms, typography, navigation, and so on. This is the fastest way to judge whether a theme's colors, spacing, and component styling fit your project.

Because the preview uses real Bootstrap markup, what you see is what you get once you drop the theme's CSS into your build. If a theme's description sounds promising but you're unsure how it handles a specific component, the preview is the place to check.

Filtering by Bootstrap version

Bootswatch maintains themes across multiple Bootstrap releases. The version selector on the site lists:

• v5.3 (and v5.3.x)
• v4.6.2
• v3.4.1
• v2.3.2
• All versions

The current themes are tuned for Bootstrap 5.3.8. If your project runs an older Bootstrap version, switch the selector to the matching release before downloading, so the theme's CSS aligns with your Bootstrap build.

Installing a theme

The installation model is deliberately simple: download a theme's CSS file and replace the one in your Bootstrap setup. There's no need to edit hex values or patch individual rules by hand.

If you want to go further, the changes for each theme are contained in just two SASS files — _variables.scss and _bootswatch.scss — which keeps customization contained and supports forward compatibility when Bootstrap updates.

Other ways to stay current

• API — available for integrating themes with your platform; NodeBB and other projects use it.
• Updates — follow via RSS feed, Twitter, or the blog.
• Source — themes are released under the MIT License and maintained by the community on GitHub.

Quick reference