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.

React Users (create-react-app, or similar bundler)

Modern JavaScript bundlers (webpack, parcel, rollup) support importing CSS from JS files. This can make it easier to deploy various 1st- and 3rd-party assets predictably.

Note: There are tradeoffs to the following method, research your tooling before deploying to production.

Before continuing, ensure you've run npm install bootswatch in your local project folder. (Use either npm or yarn.)

Add the following import to your top-level index.js (or App.js) file. Add it before any other .css imports.

import "bootswatch/dist/[theme]/bootstrap.min.css";
// TODO: Note: Replace ^[theme]^ (examples: darkly, slate, cosmo, spacelab, and superhero. See https://bootswatch.com/ for current theme names.)

Here's an example of updated imports in App.js to use "slate" theme (using a create-react-app fresh project.)

import React from 'react';
import logo from './logo.svg';
import 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:
import './App.css';

function App() {
...

CDN

You can also use the themes via CDN at jsDelivr.

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 GitHub and PayPal.