Themes for Bootstrap
Filed under user interfaceShow All
There are a few different ways you can integrate Bootswatch into your project.
Via Pre-compiled Asset
Similar to above, but you can hotlink to the appropriate
bootstrap.min.csshosted on BootstrapCDN.
Via Sass Imports
If you're using Sass (SCSS) in your project, you can import the
_bootswatch.scssfiles for a given theme. This method allows you to override theme variables.
// Your variable overrides go here, e.g.: // $h1-font-size: 3rem; @import "~bootswatch/dist/[theme]/variables"; @import "~bootstrap/scss/bootstrap"; @import "~bootswatch/dist/[theme]/bootswatch";
Make sure to import Bootstrap's
You can install as a package with the command
npm install bootswatch.
Via Ruby Gem
In your Ruby project, you can access the latest version of each theme by adding the following to your Gemfile and running
gem "bootswatch", github: "thomaspark/bootswatch"
Each theme directory is then accessible via the path
Ruby on Rails users can add the following to an initializer (e.g.
Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths
And thus be able to import themes via Sass like so:
@import "[theme]/variables"; @import "~bootstrap/scss/bootstrap"; @import "[theme]/bootswatch";
A simple JSON API is available for integrating your platform with Bootswatch. More info can be found on the Help page.
Bootswatch is open source and you’re welcome to modify the themes.
Each theme consists of two SASS files.
_variables.scss, which is included by default in Bootstrap, allows you to customize the settings.
_bootswatch.scssintroduces more extensive structural changes.
Check out the Help page for more details on building your own theme.
It's through your contributions that Bootswatch will continue to improve. You can contribute in several ways.
Issues: Provide a detailed report of any bugs you encounter and open an issue on GitHub.
Documentation: If you'd like to fix a typo or beef up the docs, you can fork the project, make your changes, and submit a pull request.
Code: Make a fix and submit it as a pull request. When making changes, it's important to keep the CSS and SASS versions in sync. To do this, be sure to edit the SASS source files for the particular theme first, then run the tasks
grunt swatchto build the CSS.
Jenil Gogari for his contributions to the Flatly theme.
Corey Sewell for SASS conversion.
Copyright and License
Copyright 2014-2018 Thomas Park
Code released under the MIT License.