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/thomaspark/bootswatch.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.less
and bootswatch.less
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 LESS 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 use the API to integrate the themes with your platform. Get:
https://bootswatch.com/api/3.json
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.
Drag Bootswatchlet into your bookmarks bar, and use it on Bootstrap-based sites to see how they'd look with a theme.
GlyphSearch is a tool for searching icons from Glyphicons, Font Awesome, and other popular icon font libraries.
FontCDN is a tool for searching web fonts from Google Fonts.
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.