How to create new set of color styles in Bootstrap 4 with sass

Question

I\'m starting to navigate through the wonderful Bootstrap 4 and I\'m wondering how to add a whole new set of elements color to the _custom.scss

Example: Right now y

Answer 1

I create completely custom colors, and add colors by creating a custom.scss, adding the new theme colors, then compile it to custom.css. Below is an example of changing the theme colors as well as adding a new color (purple). Note that you need to import bootstrap.scss at the bottom of the file for this to work. Here's an example:

$theme-colors: (
   "primary": #7189bf,
   "secondary": #667,
   "success": #72d6c9,
   "info": #00aedb,
   "warning": #df7599,
   "danger": #ffc785,
   "purple": #b19cd9,
);

@import '../../bootstrap/scss/bootstrap';

There are other ways, I just find this the easiest for me. There's a lot more you can customize in bootstrap 4, and that can also be done in this file with variables etc.

I created a template that uses this method as well as showing what all elements look like with the new theme colors. I took what I found around the web and put it together for my use - feel free to use it for yours, or change it, etc.

Here's the link: https://github.com/steveshead/bootstrap4-elements-v2