bootstrap comes with its default style which provides 8 colors, here bootcatch comes in the race which provides different variations of colors, you don’t do -anything you just have downloads the bootcatch css and replace with your default bootstrap css and trusts me it works like bam :P

USAGE:

• HTML

Manually download themes from its official website boocatch-themes and replace it with your default bootstrap.min.css

<link rel="stylesheet" href="<you project path>/css/orangely.min.css" >

Or

• CDN — <link rel="stylesheet" href="https://unpkg.com/bootcatch-themes@1.8.0/dist/material/bootstrap.min.css" >

Just change the `theme name` to change the style. e.g material to shadow

• NPM

//NPM install
npm install bootcatch-themes

• USE IN VUE.JS

//In Vue main.js file
import Vue from "vue";
import "bootcatch-themes/dist/orangely/bootstrap.min.css;

• USE IN ANGULAR

//Import in style.scss file
@import  "bootcatch-themes/dist/orangely/bootstrap.min.css";
//@import "bootcatch-themes/dist/<theme-name>/<css-file>";

OR

// you can also import in angular.json

"styles": [
    "src/styles.scss",
    "./node_modules/bootcatchthemes/dist/material/bootstrap.min.css"
]

• USE IN REACT

//import in your main file e.g index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import "bootcatch-themes/dist/material/bootstrap.min.css";

• CLONE THE REPOSITORY

git clone https://github.com/ajaymarathe/bootcatch-themes.git

• COMPILED ASSET

Download bootstrap.css or bootstrap.min.css file associated with the theme and replace it with bootstrap default stylesheet and don't forget to add bootstrap optional dependencies like js file e.g bootstrap.min.js, jquery & popper.js etc

• To learn more visit bootcatch-theme usage page — http://bootcatch.com/usage
• http://bootcatch.com/lightly

Author

If you like my work, then do follow me on github and don’t forget to give start to bootcatch-themes. Thanks.

Ajay Marathe