0

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 ?

Raoul Houessou
  • 5
  • 4
  • Hi, interesting, perhaps the css inspector might show what's overriding it? May need a higher specificity perhaps. – IronMan Sep 18 '20 at 00:34
  • Can you tell me please how to use the css inspector ? I don't know a lot about. – Raoul Houessou Sep 18 '20 at 00:40
  • I am not recommend overriding to boostrap class . Because it all style have related to each other . So add your custom class and use it . – Jack jdeoel Sep 18 '20 at 01:16
  • @DavidJawHpan Yes, and I would like to add that adding styles to a class alone could possibly not work, so either the custom stylesheet has to be loaded after the bootstrap css stylesheet or maybe inline that custom CSS. – avia Sep 18 '20 at 02:13
  • @RaoulHouessou for the Dev Tools in Chrome see here https://developers.google.com/web/tools/chrome-devtools – avia Sep 18 '20 at 02:14
  • Do you use the Meteor default css or a sass compilers for processing styles? I recommend using the sass compiler in order to customize bootstrap themes. I can create an answer if you like – Jankapunkt Sep 18 '20 at 07:12
  • I don't see any reason why it doesn't work if you overwrite the `bootstrap` classes with yours in your customized `css` file. You could use `scss` to force this. And in other hand I would recommend to not use `id`. – k.vincent Sep 18 '20 at 07:25
  • Ok I'll keep my custom class so. Thank you @DavidJawHpan – Raoul Houessou Sep 18 '20 at 09:24
  • @Jankapunkt I use default css, not sass. You think sass will do the job ? Ok I'll like to see your answer. – Raoul Houessou Sep 18 '20 at 09:31
  • @k.vincent how to use scss to force it ? – Raoul Houessou Sep 18 '20 at 09:31

1 Answers1

0

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}
avia
  • 1,527
  • 7
  • 19
  • Understood @LaurentC. I didn't know about !important overriding role. And I was avoiding having same id for many elements in my page. I know what to do now. – Raoul Houessou Sep 18 '20 at 09:27
  • @RaoulHouessou: You could use: `!important` but this could also cause you some issues under some circumstances e.g. when you once need to use some customized classes in for the same element/tag with different styles depending on you concept: ` – k.vincent Sep 18 '20 at 09:45
  • @k.vincent: Got it – Raoul Houessou Sep 18 '20 at 09:49