Bootswatch screenshot

Bootswatch

Author Avatar Theme by Thomaspark
Updated: 23 May 2025
14678 Stars

Themes for Bootstrap

Categories

Overview:

Bootswatch is a collection of themes built on top of Bootstrap, a popular front-end framework. It offers a variety of pre-designed themes that can be easily integrated into web projects. Bootswatch provides multiple ways to incorporate its themes, including pre-compiled assets, CDN usage, Sass imports, npm installation, Ruby Gem integration, and API integration. The themes can also be customized by modifying the SASS files. Bootswatch encourages contributions from the community to improve its offerings, including bug reports, documentation enhancements, code fixes, and donations.

Features:

  • Multiple Integration Options: Bootswatch offers various methods for integrating its themes into projects, including pre-compiled assets, CDN usage, Sass imports, npm installation, Ruby Gem integration, and API integration.
  • Sass Customization: Each theme consists of two SASS files, _variables.scss and _bootswatch.scss, allowing for customization of theme settings and structural changes.
  • Contributor Friendly: Bootswatch welcomes contributions from the community through bug reports, documentation enhancements, code fixes, and donations.

Installation:

Via Pre-compiled Asset

  1. Download the bootstrap.min.css file associated with your desired theme.
  2. Replace Bootstrap’s default stylesheet with the downloaded bootstrap.min.css file.
  3. Make sure to include Bootstrap’s JavaScript file for functional components like dropdowns and modals.

Via CDN

  1. Use the themes via CDN at jsDelivr by including the relevant theme URL in your HTML file.

Via Sass Imports

  1. If you’re using Sass (SCSS) in your project, import the _variables.scss and _bootswatch.scss files for your desired theme.
  2. Make sure to import Bootstrap’s bootstrap.scss between _variables.scss and _bootswatch.scss.

Via npm (create-react-app or similar bundler)

  1. Run npm install bootswatch in your local project folder.
  2. Add the following import to your top-level index.js or App.js file, before any other .css imports:
import 'bootswatch/dist/bootstrap.min.css';

Via Ruby Gem

  1. In your Ruby project, add the following line to your Gemfile:
gem 'bootswatch'
  1. Run bundle install to install the latest version of each theme.
  2. Access each theme directory via the path "#{Gem.loaded_specs["bootswatch"].load_paths.first}/[theme]".

Via API

  1. Use the available JSON API to integrate your platform with Bootswatch. More information can be found on the Help page.

Summary:

Bootswatch provides a collection of themes that can be easily integrated into web projects. It offers multiple integration options, including pre-compiled assets, CDN usage, Sass imports, npm installation, Ruby Gem integration, and API integration. The themes can be customized using SASS files, and Bootswatch encourages contributions from the community to enhance its offerings.