7

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 you have btn-danger, text-danger etc... how to create for example, using a random name: "crisp" set... so you will have btn-crisp, text-crisp etc...

My guess would be to start with adding a variable 

$brand-crisp: #color !default;

But, then what? Thanks! I appreciate your help.

danopz
  • 3,310
  • 5
  • 31
  • 42
Kitara
  • 401
  • 1
  • 3
  • 15

3 Answers3

8

There is not an all inclusive color mixin, so I think you need to use the mixins individually...

.btn-custom {
    @include button-variant(#cece19, #222222, #cece19);
}

.btn-custom-outline {
    @include button-outline-variant(#222222);
}

.card-custom {
    @include card-variant(#aa9999, #997777)
}

http://codeply.com/go/MKGQCrLwDs

Update: In Bootstrap 4, you now can create a new custom "theme-color" to as explained in my answer here. This will allow you to use the color anywhere such as btn-custom, text-custom, bg-custom, etc...

Update Bootstrap 4.1

The button mixins have changed slightly and now require add'l params...

.btn-custom {
    @include button-variant(#cece19, #222222, #cece19, #cece19, #cece19, #cece19);
}

.btn-custom-outline {
    @include button-outline-variant(#222222, #cece19, #222222, #cece19);
}

@import "bootstrap";
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • That makes sense! Thank you. Also if I want to override a mixin, because on the button-variant I don't want to go darker, I want lighter how do I do that? – Kitara Sep 08 '16 at 22:56
7

You're in luck, because today I just released an online tool that does exactly that: https://lingtalfi.com/bootstrap4-color-generator.

It will generate the necessary css code (using sass or not as an option), and will generate the 10 color variations for bootstrap4 colors.

In the end, I recommend creating a custom "my_colors.css" (or my_colors.scss) file, and put all your generated colors in it.

Note that my tool only changes colors, it doesn't care about other properties (padding, font-size, etc...).

Hope this helps.

ling
  • 9,545
  • 4
  • 52
  • 49
3

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

Steve Shead
  • 121
  • 8
  • By any chance, do you get a double `:root` variable for the color "purple" because mine did. Of course, it works as intended. Just that checking the Chrome inspector, I have 2 purple variables where one overrides the other. – yansusanto May 02 '20 at 03:50
  • The difference here is you are creating another utility color class - technically you can call it anything you like. For the case I posted above try changing "purple" to "custom" (for example) and see if that works. Much as Bootstrap 4 has root colors, only six are base utility color classes. I hope that makes sense. – Steve Shead May 03 '20 at 04:11