Bootstrap Plus

Generate colors for the bootstrap color utility classes, plus 3 additional accent colors

light
white
dark
primary
secondary
info
accent 1
accent 2
accent 3
success
warning
danger
Color

Primary

Color

Secondary

Color

Info

Random image

Mostly Cloudy

Website traffic
Unique visitors

65,782

  • Direct
    1729
  • Search
    1729
  • Referrals
    1729
  • Social
    1729
Total Sales

$82.99

2.6%

  • Facebook +15%
  • Instagram +36%
  • Twitter -5%

Bootstrap example


Today

Call Elon Musk

Create new brand color

Write about AI

Try Google Stadia

Take Powernap

Inverse colors
Color

Light on dark card

Random image

Light text on photo background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur earum eos expedita neque omnis vero voluptatum? Consectetur cumque debitis deleniti dicta dolorum, iusto.

SCSS code

Add this to your custom.scss file to override the default bootstrap colors - add this before @import "bootstrap";

$white: ;

$theme-colors: (
    "light":      ,
    "dark":       ,
    "primary":    ,
    "secondary":  ,
    "info":       ,
    "accent1":    ,
    "accent2":    ,
    "accent3":    ,
    "success":    ,
    "warning":    ,
    "danger":     ,
);