Using the themes is as easy as downloading a CSS file and replacing the one that comes with Bootstrap.
The themes are also available via CDN at BootstrapCDN.
To modify a theme or create your own, follow the steps below in your terminal. You'll need to have Git and Node installed.
Download the repository: git clone https://github.com/guru-digital/bootswatch-sass.git
Install dependencies: npm install
Make sure that you have grunt
available in the command line. You can install grunt-cli
as described on the Grunt Getting Started page.
Modify _variables.scss
and _bootswatch.scss
in one of the theme directories, or create your own in /custom
.
Type grunt swatch:[theme]
to build the CSS for a theme, e.g., grunt swatch:amelia
for Amelia. Or type grunt swatch
to build them all at once.
You can run grunt
to start a server, watch for any changes to the SCSS files, and automatically build a theme and reload it on change. Run grunt server
for just the server, and grunt watch
for just the watcher.
Here are additional tips for customizing Bootstrap.
You can update the sass files from the Offical Bootswach less files by running the following Grunt tasks
Pull down the latest official Bootswatch repository
grunt update_bootswatch_less
Convert the official Bootswatch LESS files to SASS
grunt convert_less
You can run all the update tasks by running the single task
grunt sync_with_upstream
LESS to SASS conversion is done by a series simple regular expression replacements.
While this works for 90% of the conversions, due to the complexity and differences between LESS and SASS, this process is not always enough to convert LESS to SASS properly.
The convert_less
grunt task makes up for this by supporting patch files.
Place a unified patch file named myfile.scss.patch in the same directory as myfile.scss and covert_less
will automatically apply the patch to myfile.scss after the basic regular expression has taken place.
E.g.
The patch file named paper/_bootswatch.scss.patch
will be applied to paper/_bootswatch.scss
Check out paper/_bootswatch.scss.patch
for an example
The grunt task create_pach
can be used to create a patch file
To create a patch, copy and rename the file to be patched.
E.g.
If you are creating a patch for paper/_bootswatch.scss
, copy it to paper/_bootswatch.fixed.scss
Open _bootswatch.fixed.scss
and make the changes you require
Run grunt create_patch:paper/_bootswatch.scss:paper/_bootswatch.fixed.scss
This will result in a file named paper/bootswatch.scss.patch
being created.
The command grunt convert_less
will now apply this patch after converting the less files
You can use the API to integrate the themes with your platform. Send your request to:
This returns an object with a version
and a themes
property. themes
is an array with the following properties:
name
description
preview
thumbnail
css
cssMin
cssCdn
less
lessVariables
Here's a demo of the API in action.
Bootswatch API DemoDrag Bootswatchlet into your bookmarks bar, and use it on Bootstrap-based sites to see how they'd look with a theme.
Use GlyphSearch to find the icons you need from Glyphicons, Font Awesome, and other popular icon font libraries.
Show your support for Bootswatch by buying official gear.
T-shirts based on several themes including Cyborg, Flatly, and Slate are available at Spreadshirt.
Stickers are available at Sticker Mule.
Donations are also accepted via PayPal.