Bootswatch

Quick Start

Pre-Compiled CSS

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

Package

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

CDN

You can also hotlink the themes via CDN at BootstrapCDN.

Sass

If you're using Sass in your project, you can import the _variables.scss and _bootswatch.scss files for a given theme. This method allows you to override theme variables. Make sure to import Bootstrap's bootstrap.scss in between _variables.scss and _bootswatch.scss!

// Your variable overrides can go here, e.g.:
// $h1-font-size: 3rem;

@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";

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.

Codepip has coding games for learning HTML, CSS, and JavaScript.

Donate

Donations are gratefully accepted via PayPal.