Bootstrap: opacity not working for <div>

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;

}