Repository files navigation

A collection of open source themes forBootstrap
View Bootswatch themes »

Report bug ·Request feature ·Blog

There are a few different ways you can integrate Bootswatch into your project.

Download thebootstrap.min.css file associated with a theme and replaceBootstrap's default stylesheet. You must still include Bootstrap's JavaScriptfile to have functional dropdowns, modals, etc.

You can use the themes via CDN atjsDelivr.

If you're usingSass (SCSS) in your project, you canimport the_variables.scss and_bootswatch.scss files for a given theme.This method allows you to override theme variables.

// Your variable overrides go here, e.g.:// $h1-font-size: 3rem;@import"~bootswatch/dist/[theme]/variables";@import"~bootstrap/scss/bootstrap";@import"~bootswatch/dist/[theme]/bootswatch";

Make sure to import Bootstrap'sbootstrap.scss in between_variables.scssand_bootswatch.scss!

You can install as a package with the commandnpm install bootswatch.

Modern JavaScript bundlers (webpack, parcel, rollup) supportimporting CSS from JS files. This can make it easier to deploy various 1st and 3rd party assets predictably. Note:There are tradeoffs to the following method, research your tooling before deploying to production.

Before continuing, ensure you've runnpm install bootswatch in your local project folder. (Use eithernpm oryarn.)

Add the followingimport to your top-levelindex.js (orApp.js) file. Add itbefore any other.css imports.

import"bootswatch/dist/[theme]/bootstrap.min.css";// TODO: Note: Replace ^[theme]^ (examples: darkly, slate, cosmo, spacelab, and superhero. See https://bootswatch.com for current theme names.)

Here's an example of updatedimports inApp.js to use "slate" theme (using acreate-react-app fresh project.)

importReactfrom'react';importlogofrom'./logo.svg';import'bootswatch/dist/slate/bootstrap.min.css';// Added this :boom:import'./App.css';functionApp(){...

In your Ruby project, you can access the latest version of each theme by addingthe following to your Gemfile and runningbundle install:

gem"bootswatch",github:"thomaspark/bootswatch"

Each theme directory is then accessible via the path"#{Gem.loaded_specs["bootswatch"].load_paths.first}/[theme]".

Ruby on Rails users can add the following to an initializer (e.g.config/initializers/bootswatch.rb):

Rails.application.config.assets.paths +=Gem.loaded_specs["bootswatch"].load_paths

And thus be able to import themes via Sass like so:

@import"[theme]/variables";@import"~bootstrap/scss/bootstrap";@import"[theme]/bootswatch";

A simple JSON API is available for integrating your platform with Bootswatch.More info can be found on theHelp page.

Bootswatch is open source and you’re welcome to modify the themes.

Each theme consists of two SASS files._variables.scss, which is included by default in Bootstrap, allows you to customize the settings._bootswatch.scss introduces more extensive structural changes.

Check out theHelp page for more details on building your own theme.

It's through your contributions that Bootswatch will continue to improve. You can contribute in several ways:

• Issues: Provide a detailed report of any bugs you encounter and open an issue onGitHub.

• Documentation: If you'd like to fix a typo or beef up the docs, you can fork the project, make your changes, and submit a pull request.

• Code: Make a fix and submit it as a pull request. When making changes, it's important to keep the CSS and SASS versions in sync. To do this, be sure to edit the SASS source files for the particular theme first, then run the tasksgrunt swatch to build the CSS.

• Donation: Donations are gratefully accepted viaGitHub andPayPal.

Thomas Park

• https://github.com/thomaspark
• https://thomaspark.co/

• Mark Otto andJacob Thornton forBootstrap.
• XhmikosR for ongoing maintenance support.
• Jenil Gogari for his contributions to the Flatly theme.
• James Taylor forcors-lite.
• Corey Sewell for SASS conversion.

Copyright 2014-2023 Thomas Park

Code released under theMIT License.