While working on my webpage, I utilized bootstrap cards to maintain a clean and organized layout. By default, bootstrap cards are white in color. Unlike the navbar, where you can easily set color options like navbar-dark, changing the color of the cards required manual adjustment. Everything seemed to be going smoothly, but there was a small issue that bothered me - the border between the header and the title. Due to the black border against the black card color I chose, it became almost invisible.
ScreenShot of my Issue: https://ibb.co/8MqtRJP
PS: If you can't see the border on the bootstrap card try looking again, because it is kind of hard to see at first
My Code:
<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header" style="color: white" >Time Managing</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">Prioritization</h5>
<p class="card-text">Additional content.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
I tried using the class="card" and giving it a style of
.card {
border: color: white;
}
I expected the border to change to white as it is usually done with the border property, but that approach did not work.
Does anyone have any suggestions or solutions to resolve this issue?