Topic: Not able to change badge's text color

jfcherng free asked 3 years ago

I would like to have a .badge-warning but with black text.

<span class="badge badge-warning text-dark">BADGE</span>

The above code won't work because both .badge and .badge-warning have color: white !important. What I wonder is that why there is a !important...? Is this necessary for MDB?

Marta Wierzbicka staff answered 3 years ago


we overwrite the Bootstrap code with an !important flag. We will fix this issue with text color in badge in the near future. Do you need a code for text color from me or you can fix this by yourself for now?

Best, Marta

jfcherng free commented 3 years ago

I have a workaround <span class="badge badge-warning"><span class="text-dark">BADGE</span></span>. But since MDB is introduced after including bootstrap's stylesheet, wouldn't MDB's .badge-warning (and other rules) overwrites bootstrap's automatically without !important?

Marta Wierzbicka staff commented 3 years ago


yes, it should be without !important and we will fix this soon. Once again, I apologize for this.

Best, Marta

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.10.1
  • Device: PC
  • Browser: Chrome 79
  • OS: Win7
  • Provided sample code: Yes
  • Provided link: Yes