Sometimes you want more color in your bootstrap website, but you can't be bothered to download or create your own theme from scratch. Well, here are several easy to implement colors, complete with hover and active states! These colors are meant to supplement the built-in colors that bootstrap has by default (such as -success or -danger). If you have any suggestions on colors you would like to see added, why not leave a comment?
Colors:
https://bootstrap-colors-extended.herokuapp.com/BootstrapColors.html
Themes:
https://bootstrap-colors-extended.herokuapp.com/BootstrapThemes.html
Method 1: External CSS - Simply download the bootstrap-colors.css and/or bootstrap-colors-themes.css file into your project folder and link to it in your HTML file as you normally would.
Method 2: CDN - Paste the following link(s) into your HTML page to directly get the CSS needed for Bootstrap Colors Extended.
<link rel="stylesheet" href="https://bootstrap-colors-extended.herokuapp.com/bootstrap-colors.css" />
<link rel="stylesheet" href="https://bootstrap-colors-extended.herokuapp.com/bootstrap-colors-themes.css" />
All normal bootstrap colors are still usable as normal! The following colors are currently available with BootstrapColorsExtended:
indigo
teal
orange
pink
maroon
navy
yellow
lime
gray
brown
grape
vermillion
steel
green
The above colors also have -light and -dark versions for text color, background color, and border color!
The following themes are now added!
royal
shades
grass
candy
elegant
beach
kiwi
jelly
office
neon
The following bootstrap tags are supported (where * donates one of the above colors):
bg-*
text-*
border-*
bg-*-light
bg-*-dark
text-*-light
text-*-dark
border-*-light
border-*-dark
btn-*
btn-outline-*
table-*
thead-*
badge-*
alert-*
list-group-item-*
All tags work correctly with their hover and active states.