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. Download the repository: git clone https://github.com/thomaspark/bootswatch.git

  2. Install dependencies: npm install

  3. Make sure that you have grunt available in the command line. You can install grunt-cli as described on the Grunt Getting Started page.

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

  5. 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.

  6. 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.

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.