Bootstrap 4: Can't Change Card Header Properties

Question

In the style.css, I have set

.card-header {
  background-color: transparent; 
  border-color: transparent;
}

and changed

<div class="card-header" style="background-color: transparent; border-color: transparent;">
    <div class="card-title">about</div>
</div>

to

<div class="card-header">
    <div class="card-title">about</div>
</div>

But it still outputs

What could be preventing this from changing? I know the style.css is placed properly because I can change other properties such as

.card-text {
padding: 2% 2% 2% 2%;
}

and those changes go into effect.

Answer 1

Found the answer. To edit .card-header,

.card .card-header {
  background-color: transparent; 
  border-color: transparent;
}

Answer 2

you can use like this :

<div class="card-header bg-purple">