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

new york, ny
37
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%
List of links
5 Ways to improve your writing skills
Yesterday, 5.04 PM
The Surprising Nuance Behind Art
Yesterday, 10 PM
Rewire your brain to beat procrastination
2 Days ago
No Innovation Without Representation
2 Days ago
Read More
Project Status

Branding & Product Design

4 Members
D
P
S
I
Accent 1

Color

Accent 2

Color

Accent 3

Color

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":     ,
);