How to expand the Bootstrap CSS color palette

Your probably familiar with the default colors that come with Bootstrap CSS. Bootstrap Default Colors

But did you know you there are over 100 other colors at your disposal with a little setup?

You can edit the scss/_variables.scss file that comes with your bootstrap library to incldue these classes.

$colors: (
  "yellow-100": $yellow-100, /* add colors from bootstrap color palette */ 
  "teal-300": $teal-300,
  "custom-red": #f2645a /* or add your own custom color */ 
   /* and so on */ 
);

Now you can use text or backgrounds classes with these colors.

<a class="btn btn-teal-300 px-4" href="#">Get Started</a>

You can find all of the colors listed here.

The Full Stack Dev Newsletter

The Freelance Avatar

Hey, I'm Wes. Every month I send a newsletter with articles on:

  • ​🔥 Hot Web Dev tips
  • 🎨 Web Design
  • 🔨 Product Development

As seen at the top of Hacker News, Indie Hackers, and Hacker Noon.