Themes for Bootstrap

  • By Thomas Park
  • Last update: Jan 1, 2023
  • Comments: 16

Bootswatch

A collection of open source themes for Bootstrap
View Bootswatch themes »

Report bug · Request feature · Blog

Usage

There are a few different ways you can integrate Bootswatch into your project.

Via Pre-compiled Asset

Download the bootstrap.min.css file associated with a theme and replace Bootstrap's default stylesheet. You must still include Bootstrap's JavaScript file to have functional dropdowns, modals, etc.

Via CDN

You can use the themes via CDN at jsDelivr.

Via Sass Imports

If you're using Sass (SCSS) 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.

// 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 bootstrap.scss in between _variables.scss and _bootswatch.scss!

Via npm

You can install as a package 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() {
...

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 bundle install:

gem "bootswatch", github: "thomaspark/bootswatch"

Each theme directory is then accessible via the path "#{Gem.loaded_specs["bootswatch"].load_paths.first}/[theme]".

Ruby on Rails users can add the following to an initializer (e.g. config/initializers/bootswatch.rb):

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";

Via API

A simple JSON API is available for integrating your platform with Bootswatch. More info can be found on the Help page.

Customization

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.scss introduces more extensive structural changes.

Check out the Help page for more details on building your own theme.

Contributing

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 swatch to build the CSS.

Donation: Donations are gratefully accepted via GitHub and PayPal.

Author

Thomas Park

Thanks

Mark Otto and Jacob Thornton for Bootstrap.

Jenil Gogari for his contributions to the Flatly theme.

James Taylor for cors-lite.

Corey Sewell for SASS conversion.

Copyright and License

Copyright 2014-2021 Thomas Park

Code released under the MIT License.

Github

https://github.com/thomaspark/bootswatch

Comments(16)

  • 1

    Support for Bootstrap 4

    With the release of Bootstrap 4 alpha, when can we expect the bootswatch themes to be updated? I know it probably makes sense to wait for a beta before spending too much time on it.

  • 2

    Make Bootswatch available as a package for Bower

    See http://twitter.github.com/bower/

    With Bower, someone could install the Bootswatch package and then include components/bootswatch/THEME_NAME.min.css in their HTML files.

  • 3

    Material Design theme

    I think that Google's Material Design would make an interesting candidate for a bootswatch theme.

    I have started work on this since I'm curious what it would look like with Bootstrap and I want to learn to create my own bootswatch, though I would be interested in eventually submitting my theme if there is an interest and I can complete it.

    Note that the Material Design spec involves some things like animations and new kinds of components that could be difficult to replicate completely without implementing new features. However, I think this would still at least look nice with existing Bootstrap features, in the spirit of themes like Yeti and Cyborg.

  • 4

    Plain of bootstrap3

    Hi, frist thanks for the greate project, i use it in my project http://demo.xadmin.io .

    Bootstrap3 will coming soon, and changes a lot of layout, components etc. I want to know if there any plain of bootstrap3 themes?

    btw, my project bootstrap3 demo http://x-demo-b3.herokuapp.com

    bootstrap3 is mobile frist, so in my b3 demo, you can use in mobile device or small screen.

  • 5

    Google fonts

    I saw this issue closed, and wanted to bring your attention to it once agian:

    Requesting stuff from https://fonts.googleapis.com/ is very slow, especially with SSL enabled - perhaps we should consider adding the fonts into the Git repo so that they can be served from the local server?

    Its not just that, its also a security hazard, as far as I understand.

    Can you perhaps post a howto for newbies on how to get rid of google's fonts and serve them locally?

    Thanks.

  • 6

    Webpack Support

    I figured out that to import the files from the npm installed module in webpack requires a bit of effort, so I wrote up a blog post. I am adding this as an issue in case anyone else also had the same question and searched for it here.

  • 7

    Bootstrap 5

    Hi,

    Thank you for your hard work, its really appreciated.

    The new version of Bootstrap (version 5) is around the corner: https://v5.getbootstrap.com/

    Are there preparations underway for it?

    Cheers

  • 8

    Solarized themes (Dark, Light)

    I know it's a very classic color theme but still it would be nice to have them nicely polished.

    http://ethanschoonover.com/solarized

    • [ ] ~~Solarized Light~~
    • [ ] Solarized Dark
  • 9

    Paper - general suggestions for improvement

    While the paper theme looks nice, it seems to be lacking some of the qualities of the material design that I think could be implemented and still conforming to generally qualities of bootstrap/bootswatch themes. Animations are not really present at all. Maybe the floating labels should raise. Ink for the buttons and tabs and other things you click on. I'd also work on the checkboxes and radio buttons. Finally, there is a list of colors that Google recommends for a palette. It would be cool if we could use those.

    I can take a stab at some of these changes but I just wanted to address them first.

  • 10

    hitaar: new theme

    Hello @thomaspark,

    I am totally heartfelt and joyous with the success of Flatly and also see that people are requesting for a version of Flatly; so here I am with a quick, to-start-with and a decent version of Hitaar: A night-mode view of Flatly. This is totally keeping in mind https://github.com/thomaspark/bootswatch/issues/191 and https://github.com/thomaspark/bootswatch/pull/224.

    Here is a glimpse: untitled

    Feedback from you is most welcome. I insist on the name 'Hitaar' although I think we can work something out for a sub line.

    Best from India, Jenil

  • 11

    fix remote font imports for less 3 again

    Bootswatch 3 won't compile under less 3 as reported in

    • https://github.com/thomaspark/bootswatch/issues/841
    • https://github.com/thomaspark/bootswatch/issues/842

    A fixed was made on 15/6/18 by: https://github.com/thomaspark/bootswatch/commit/5467d71dc140144eb452acfa761b879fe869da29, but the fix was never actually applied the v3 branch.

    So Bootswatch 3.4.1, released after the fix on 13/2/19, is still incompatible with less 3.

    This fix adds the original fix to the v3 branch.

    Since there probably won't be a bootstrap 3.4.2, at least not in the near future, maybe you could release a 3.4.1+1 wit this fix?

  • 12

    Support new Color modes

    The default Bootstrap just came out with color modes: https://getbootstrap.com/docs/5.3/customize/color-modes/

    It would be great if bootswatch supported these, at least dark mode

  • 13

    Reference to :root in cerulean _bootswatch.scss

    You probably want to take a look at this in light of bootstrap #37377: Import root in bootstrap-utilities dist/cerulean/_bootswatch.scss#L9

    :root {
   color-scheme: light;
}

    I am not an expert I am just reporting an issue I found trying to build with grunt on my machine. Also I am curious when the time comes how dark themes are going to affect the build procedure in 5.3.0?

  • 14

    Sandstone Theme v4: bg-primary different from other primary colors

    Hi,

    is it intended that bg-primary in Sandstone v4 differs from all other primary colors? In v5 it is defined as expected. There are 2 definitions of bg-primary, obviously the first one is overridden.

    #6794 - dark blue, expected color .bg-primary { background-color: #325d88 !important; }

    #10341 - dark gray, don't know why this overrides the first definition .bg-primary { background-color: #3e3f3a !important; }

    KR, Gerhard

  • 15

    text-bg-light unreadable input/button on quartz theme

    I noticed when using text-bg-light on quartz theme form-control and btn-outline-secondary becomes unreadable, works fine for text-bg-dark

    https://codepen.io/barisusakli/pen/MWGOaob

    Screenshot image

  • 16

    Slate --bs-btn-padding-* is different from similar styles (e.g. Simplex)

    We are using Slate and Simplex to switch between dark and light themes due to their similarity in overall style. However, there's one key issue that appears to be a bug: the --bs-btn-padding-x and --bs-btn-padding-y fields in .btn are set to 1rem and 0.75rem respectively, while the corresponding values in Simplex are 0.75rem and 0.375rem.

    This issue makes the Slate default buttons actually appear the same size as the .btn-lg variants (at least in height), while the Simplex buttons correctly step down in size from .btn-lg to .btn to .btn-sm. This issue can also be seen on the live previews for Slate and Simplex, specifically in the row that shows the 3 button sizes.

    For now, I have simply overridden these values in my local code, but it would be great to see them fixed in the repo itself. The offending lines are 2813 and 2814 of the dist/slate/bootstrap.css file. Thanks in advance!

Popular Tag

Related