Bootstrap: opacity not working for <div> - html

Question

I have a bootstrap panel in which I am setting the opacity, but it is not working.
Background image is all set good. But a panel in the side needs to be transparent... rather translucent (50%). Its not happening. I have tried the opacity.
Below is the code:
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-primary halfOpacity">
<div class="panel-body">
<!-- <div class="card border-primary mb-3">
<div class="card-block special-card"> -->
<p>
<div class="image" style="text-align:center;">
<img src="dise-resized.png" alt="DISE">
</div>
</p>
<p><br></p>
<p>
<div class="input-group">
<span class="input-group-addon info">Username:</span>
<input type="text" id="username" name="username" class="form-control" placeholder="Enter NTID" required>
</div>
</p>
<p>
<div class="input-group">
<span class="input-group-addon info">Password:</span>
<input type="password" id="password" name="password" class="form-control" placeholder="Enter password" required>
</div>
</p>
<p>
<button class="btn btn-primary btn-block" type="submit">Login</button>
</p>
<!--</div>
</div> -->
</div>
</div>
</div>
And the CSS looks like:
div.halfOpacity {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
Below is the screenshot what it looks like now.
I need the white background to be translucent.

Answer 1

You can use !important sometimes some classes cuz this problem or try backgroud-color:transparent
div.halfOpacity {
opacity: 0.6 !important;
// or background-color:transparent;
}