Themes for Bootstrap

Thomas Park

Last update: Jan 2, 2023

Overview

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

Code released under the MIT License.

Comments

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.

opened by travisdahlke 77
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.

opened by nickmccurdy 23
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.

opened by nickmccurdy 22
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.

opened by sshwsfc 20
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.

opened by pythonmobile 20
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.

opened by saulshanabrook 15
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

opened by lesichkovm 14
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
opened by lipis 14
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.

opened by kristenmills 14
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:

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

opened by jenil 13
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?
opened by tomyam1 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

opened by GregJohnStewart 0
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?
opened by ctipper 0
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

opened by g-spot 1
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

opened by barisusakli 0

Owner

Thomas Park

GitHub https://bootswatch.com

A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap. Preview View Live Preview Sta

327 Dec 18, 2022

A shop homepage Bootstrap HTML template created by Start Bootstrap

Start Bootstrap - Shop Homepage Shop Homepage is a basic HTML online store homepage template for Bootstrap created by Start Bootstrap. Preview View Li

390 Jan 1, 2023

A Bootstrap HTML business homepage template created by Start Bootstrap

Start Bootstrap - Business Frontpage Business Frontpage is a basic business website template for Bootstrap created by Start Bootstrap. Preview View Li

181 Nov 28, 2022

A Bootstrap HTML homepage template with feature boxes - created by Start Bootstrap

Start Bootstrap - Heroic Features Heroic Features is a multipurpose HTML template for Bootstrap created by Start Bootstrap. Preview View Live Preview

160 Nov 27, 2022

Bootstrap-print-css - Print Stylesheet for Bootstrap 5

Bootstrap Print CSS ??️ Bootstrap 5 no longer includes custom CSS for printing - with the CSS in this project you can add it back. Note: This should i

35 Dec 13, 2022

Light-switch-bootstrap - Dark mode toggle for Bootstrap 5

?? Light Switch for Bootstrap 5 Basic Bootstrap 5 custom checkbox to use night mode in your web site. Under the hood Switching to dark mode is done by

35 Jan 2, 2023

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

react-with-styles Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or Reac

1.7k Dec 8, 2022

Now UI Kit Bootstrap 4 - Designed by Invision. Coded by Creative Tim

Now UI Kit Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featurin

1.7k Jan 7, 2023

Jekyll Bootstrap theme

Landing Page Jekyll theme Jekyll theme based on landing-page bootstrap theme How to use Place a image in /img/services/ Create posts to display your s

412 Dec 3, 2022

A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age New Age is a web app landing page theme for Bootstrap created by Start Bootstrap. Preview View Live Preview Status Download

996 Dec 26, 2022

AngularJS SPA Template for Visual Studio is a project skeleton for a simple single-page web application (SPA) built with AngularJS, Bootstrap, and ASP.NET (MVC, Web Api, SignalR).

AngularJS SPA Template for Visual Studio This project is a skeleton for a simple single-page web application (SPA) built on top of the: AngularJS 1.2.