I'm having trouble customizing the card header on a bootstrap 4 accordion. I can't seem to override the default style set by the preset class.
My goal is to modify .btn-link so that it doesn't have an underline when active or visited. However, applying styles to .btn-link:active and .btn-link:visited doesn't appear to have any effect, and I'm unsure why.
Could it be necessary to directly edit the bootstrap CSS itself? Since I am working in CodePen, I don't have direct access to make changes there.
If anyone has faced this issue before, I would appreciate hearing from you!
You can view the pen on CodePen here: https://codepen.io/jreecebowman/full/dmpLRp/ (the accordion can be found in the 'products' section).
Alternatively, the code is provided below.
Thanks in advance!
html for the first card in the accordion:
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion1">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica...
</div>
</div>
corresponding css:
#products {
padding-top:100px;
min-height:100%;
position:relative;
background-color:whitesmoke;
#accordion1, #accordion2 {
box-shadow:0px 0px 5px 0px lightgray;
#headingOne {
.btn-link {
color:navy;
opacity:0.8;
}
.btn-link:hover {
opacity:1.0;
text-decoration:none;
}
.btn-link:active {
text-decoration:none;
}
.btn-link:visited {
text-decoration:none !important;
}
}
}