Guide · Open source
How to use Bootswatch: install and apply Bootstrap themes
Updated · written with AI from the project's own documentation and checked against our catalogue data
Bootswatch is a collection of open source color and style themes for Bootstrap, the CSS toolkit used to build websites. Each theme swaps Bootstrap's default look for a different design without changing your layout code. This guide shows the ways to load a theme and what to check so it works in your project.
Bootswatchthomaspark/bootswatch · ★ 14.7k · MIT Install options & downloads Quick start
- 1Confirm Bootstrap is in place. Make sure your site or app already uses Bootstrap, since Bootswatch only styles Bootstrap components.
- 2Pick a theme. Browse the theme names on the Bootswatch homepage, for example darkly, slate, cosmo, spacelab or superhero.
- 3Add the stylesheet. Either download the theme's bootstrap.min.css, load it from jsDelivr, or install the package with npm install bootswatch.
- 4Keep Bootstrap JavaScript. Include Bootstrap's JavaScript file so dropdowns, modals and other interactive parts keep working.
- 5Check the page. Open your page and confirm the new look applies and interactive components still respond.
Check that Bootstrap is already in your project
Bootswatch only styles Bootstrap components. Its themes replace Bootstrap's stylesheet, so Bootstrap must already be part of the page or build. If you are not using Bootstrap, Bootswatch will not work on its own.
Load a theme with a pre-compiled CSS file or CDN
Download the bootstrap.min.css file for the theme you want and replace Bootstrap's default stylesheet. You must still include Bootstrap's JavaScript file to keep dropdowns, modals and similar components working.
You can also load themes through jsDelivr at the Bootswatch package page on jsDelivr instead of downloading the file.
Install Bootswatch with npm
Install the package in your project folder with npm. The README also documents cloning the repository from GitHub if you prefer to work from source.
Once installed, the theme CSS files are available under the dist folder, in a directory named after each theme.
npm install bootswatchUse a theme in a React project
Modern bundlers such as webpack, parcel and rollup can import CSS from JavaScript files. Run npm install bootswatch first. Then add the import to your top-level index.js or App.js file, placing it before any other CSS imports.
The README notes there are tradeoffs to this method, so research your tooling before deploying to production. Replace the theme name in the path with a theme such as darkly, slate, cosmo, spacelab or superhero.
import "bootswatch/dist/[theme]/bootstrap.min.css";Customize a theme with Sass
If your project uses Sass (SCSS), import the _variables.scss and _bootswatch.scss files for a theme. This lets you override theme variables. Bootstrap's bootstrap.scss must sit between the two imports.
Each theme consists of two Sass files. _variables.scss allows you to change settings, while _bootswatch.scss makes more extensive structural changes. The README points to the Help page for more on building your own theme.
@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";Use Bootswatch in a Ruby on Rails project
Add the bootswatch gem from the GitHub repository to your Gemfile and run bundle install. Each theme directory is then reachable through the gem's load path.
For Rails, the README suggests adding the gem's load paths to the asset pipeline in an initializer, such as config/initializers/bootswatch.rb. After that you can import themes through Sass using the theme name.
gem "bootswatch", github: "thomaspark/bootswatch"Compare themes before you choose one
The Bootswatch homepage lists the available themes. Trying a few on a sample page is a quick way to see how each one looks with your content before you commit to a theme in production.
- Use the CDN or a downloaded file for a quick test.
- Keep the theme you choose in one place so it is easy to swap later.
What people use it for
- Restyling an existing Bootstrap website without rewriting its layout code.
- Giving an internal tool or prototype a finished look quickly.
- Comparing several Bootstrap styles before choosing one for a project.
- Loading a theme into a React, Ruby on Rails or plain HTML page.
Frequently asked questions
Is Bootswatch free to use?
Bootswatch is released under the MIT License, and the README states the code is open source. The project also accepts optional donations through GitHub and PayPal.
Do I need Bootstrap to use Bootswatch?
Yes. The themes replace Bootstrap's stylesheet and only style Bootstrap components, so Bootstrap must already be part of your project.
How do I install Bootswatch with npm?
Run npm install bootswatch in your project folder. The README also gives a git clone command for the GitHub repository if you want the source.
Can I use Bootswatch with React?
Yes. Install the package with npm, then import the theme's bootstrap.min.css file in your top-level index.js or App.js, placed before other CSS imports.
Why do my dropdowns or modals not work after adding a theme?
The README says you must still include Bootstrap's JavaScript file for dropdowns, modals and similar components. Swapping only the CSS will not make interactive parts function.
Can I customize a Bootswatch theme?
Yes. The project is open source and each theme has _variables.scss for settings and _bootswatch.scss for structural changes. Import them with Sass in the order the README describes.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Bootswatch suits developers and designers who already use Bootstrap and want a finished look quickly, especially for prototypes and internal tools. If you need a fully custom brand design or do not use Bootstrap, pick a different approach, such as building your own styles or using a Bootstrap theme marketplace like Bootstrap Themes.
Install options & downloads