Bootswatch

Quick Start

Using the themes is as easy as downloading a CSS file and replacing the one that comes with Bootstrap.

You can install as a package via npm with the command npm install bootswatch.

You can also hotlink the themes 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. In /dist, modify _variables.scss and _bootswatch.scss in one of the theme directories, or duplicate a theme directory to create a new one.

  5. Type grunt swatch:[theme] to build the CSS for a theme, e.g., grunt swatch:flatly for Flatly. 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 SASS 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.

If you prefer a web interface for customizing themes, check out Bootstrap.build. From within the builder, you can click the Import button to load the Bootswatch theme of your choice as a starting point.

API

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

https://bootswatch.com/api/4.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
  • scss
  • scssVariables

Here's a demo of the API in action.

Tools

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.

Donate

Donations are gratefully accepted via PayPal.