Bootstrap-color NPM

Bootstrap Color

Gallery of color theme for Bootstrap 4

Each folder under /dist/ is it's own theme including:

bootstrap-color.css : built CSS
bootstrap-color.min.css : built and minified css
_begin.scss : customize settings
_end.scss : modify structure

Getting started

You can use the built CSS files under /dist/, or import SASS files _begin.scss _end.scss directly to your scripts to customize it.

We made a demo using bootstrap-color with Vue at bootstrap-color-demo-vue you can checkout and customize on it.

Build steps

You can also checkout the project to local, modify the themes then build with: yarn build

Usage

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

Via Pre-compiled Asset

Download the bootstrap-color.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 Sass Imports

If you're using Sass (SCSS) in your project, you can import the _begin.scss and _end.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 "~bootstrap-color/dist/[theme]/begin";
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-color/dist/[theme]/end";

Make sure to import Bootstrap's bootstrap.scss in between _begin.scss and _end.scss!