How to Browse and Preview Free Bootstrap Themes on Bootswatch

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