How to change the opacity of a card-block in bootstrap 4

Question

Hey I just have a simple Card Bootstrap 4 component.

<div class="card">
    <div class="card-header">This is my header</div>
    <div class="card-block">This is my block</div>
    <div class="card-footer">This is my footer</div>
</div>

What I wanted to accomplish was to have the header and footer with a opacity of 1 but the block with a opacity of .4. I tried to use rbga in the background-color style with no luck

.card-block { background-color: rgba(245, 245, 245, 0.4); }

Answer 1

Turns out the bootstrap class .card was overriding the background opacity css style I was trying to set on .card-block regardless of whether I put !important keyword or not.

I was able to fix this by adding the background style to the card and just changing the individual opacities of the .card-header and .card-footer to 1.

.card { background-color: rgba(245, 245, 245, 0.4); }
.card-header, .card-footer { opacity: 1}