Bootswatch

Quick Start

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.

Customization

To modify a theme or create your own, follow the steps below in your terminal. You'll need to have Git and Node installed.

  1. git clone https://github.com/thomaspark/bootswatch.git

  2. npm install

  3. Edit variables.less and bootswatch.less in one of the theme directories, or create your own in /custom.

  4. 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. To have grunt available in the command line, install grunt-cli as described on the Grunt Getting Started page.

  5. You can also run grunt watch to watch for any changes to the LESS files and automatically build a theme on change.

Here are additional tips for customizing Bootstrap.

API

You can use the API to integrate the themes with your platform. Send your request to:

http://api.bootswatch.com/3/

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 Demo

Bookmarklet

Drag Bootswatchlet into your bookmarks bar, and use it on Bootstrap-based sites to see how they'd look with a theme.

GlyphSearch

Use GlyphSearch to find the icons you need from Glyphicons, Font Awesome, and other popular icon font libraries.