Changing styles of bootstrap .btn-success and .btn-warning buttons not working in Meteor

Question

Inside my meteor application, I tried to change the colour of bootstrap 4.5 .btn-warning and .btn-success buttons to have other colours. But none of my styles which I applied into the main.css files is working, whereas the styles on the other elements of the same css file works properly.

Here are the styles I applied :

.btn-success {
  color: #fff;
  background-color: #20ad00;
  border-color: #20ad00;
}

.btn-warning {
  color: #fff;
  background-color: #f36a02d1;
  border-color: #ffa04d;
}

While not working, I finally copied all the .btn and .btn-success .btn-warning styles from the browser console development tool, replaced the classes with btn-success-sitename and btn-warning-sitename, and pasted the copied styles respectively to the new classes in myy css file. But I think there's a better way to do it.

Any suggestion ?

Answer 1

So either as suggested David add an id to the elements and write that code for these new IDs. They will override styles contained inside the boostrap classes b/c IDs have higher specificity.

<button class="btn-success" id="custom-button-1">Click here</button>

And then in your CSS

#custom-button-1 {
background:blue}

Otherwise, you could try adding !important at the end of your style statements, it should override the BS styles too, like this:

.btn-success {
background:blue!important}