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); }

have you tried using [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) — happymacarts, Feb 24 '17 at 05:19
Would it solve your problem to go for "bg-transparent" as mentioned on the link above; https://getbootstrap.com/docs/4.1/utilities/colors/ — akinov, Aug 13 '18 at 22:23

happymacarts · Answer 1 · 2017-02-24T05:44:06.343

24

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>

edited Feb 24 '17 at 05:44

answered Feb 24 '17 at 05:21

happymacarts

2,547
1
25
33

1

if the answer is useful and meets your needs please accept. – happymacarts Feb 24 '17 at 06:00
This is working to change the opacity of the text, the background is still a solid white, inherited from the .card parent div – Luke Flournoy Feb 24 '17 at 18:13
1

modify the `background-color: rgba(245, 245, 245, 1);` to adjust as needed. – happymacarts Feb 24 '17 at 18:29
1

happymacarts, I love you :P Thanks! – Sergo Jul 09 '22 at 18:02

score 15 · Answer 2 · answered Jan 08 '19 at 15:23

15

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>

answered Jan 08 '19 at 15:23

Jorge Opazo

151
1
2

PERFECT! This was exactly what I was looking for! – Robert Saylor Jun 24 '19 at 11:20

score 7 · Accepted Answer · answered Feb 24 '17 at 18:09

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}

score 2 · Answer 4 · answered Mar 12 '19 at 02:38

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;
        }

score 1 · Answer 5 · answered Feb 24 '17 at 05:23

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

score 0 · Answer 6 · answered May 21 '18 at 13:58

0

opacity is different to the background-color opacity will set the translucency of the element and background-color will set it only for th colour of the background.

This may sound similar but they are very different.

The big diff is that opacity will make the text adn images and child elements also transplucent but the background-color will only affect the col...oh, you get it ;)

answered May 21 '18 at 13:58

jayenne

11
1
2

Please add some code so other users can test what you're describing. Thanks! – Ignacio Ara May 21 '18 at 14:21

score -1 · Answer 7 · answered Aug 24 '18 at 16:19

Here's what has worked with me (using custom sass variables I created) to modify background colors, etc within the accordion:

::ng-deep div.card-header:hover {
background-color: var(--subtle-gray);
}

::ng-deep div.card-header a {
background-color: var(--accent);
text-decoration: none !important;
}

::ng-deep div.card-body {
background-color: var(--subtle-gray);
}

score -3 · Answer 8 · answered Mar 08 '21 at 09:21

-3

In Bootstrap 4 you can type "opacity-50" into class thats mean opacity:0.5 in css without type any css code and "opacity-30" thats mean opacity:0.3 in css etc...

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

answered Mar 08 '21 at 09:21

Abdallah Labib

9
3

1

That is not correct. It is possible since Bootstrap 5.1, see this [link](https://getbootstrap.com/docs/5.1/utilities/opacity/) – Philipp Palmtag Jul 18 '22 at 08:10

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

8 Answers8