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

have you tried using opacity

.special-card {
/* create a custom class so you 
   do not run into specificity issues 
   against bootstraps styles
   which tends to work better than using !important 
   (future you will thank you later)*/

  background-color: rgba(245, 245, 245, 1);
  opacity: .4;
}

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

Answer 2

please, try this:

<div class="card-transparent">
  <div class="card-header">This is my header</div>
  <div class="card-block special-card" style="background-color: rgba(245, 245, 245, 0.4); ">This is my block</div>
  <div class="card-footer">This is my footer</div>
</div>

Answer 3

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}

Answer 4

Try this approach

HTML

<div class="card text-white bg-success mb-3 mt-4" style= "">
    <div class="card-header">Пользователь</div>
    <div class="card-body special-card" style="">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-primary mb-3" style=" ">
    <div class="card-header">Привязанный профиль персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Secondary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-danger mb-3" style=" ">
    <div class="card-header">Права доступа профиля персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

CSS

 .special-card {
            background-color: rgba(245, 245, 245, 0.4) !important;
        }

Answer 5

Your css looks ok. I think the issue is your bootstrap file is overriding your code. Try this to override the code although I wont suggest using !important

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

Refer to this link for the overriding. Its called specificity