(Customizing Bootstrap 4.1.3)
I am currently working on personalizing a card design. Initially, I added border-danger
<div class="row">
<div class="col">
<div class="card border-danger">
<div class="card-header border-danger">
Label
</div>
<div class="card-body">
Text <br/>
Text
</div>
</div>
</div>
</div>
This resulted in the following output:
https://i.sstatic.net/w51je.png
Everything seemed to be going well. Next, I attempted to change the background of the header using the same code along with:
...
<div class="card-header border-danger bg-white">
...
However, this caused the top border of the card to become thinner: https://i.sstatic.net/Cg6e9.png
Any combination of borders and background colors applied to card, card-header, card-body, etc. seem to produce similar border issues (not limited to just the top side).
Does anyone have a solution for this problem or any hints on how to prevent it?
Thank you in advance!
--- Edit --------------------------------------------
I decided to test the hello world template from Bootstrap 4 website (using CDN links for version 4.0.0 instead of 4.1.3) It appears perfectly fine in Firefox Developer 64.0b2 (64-bit).
In Chrome Version 70.0.3538.67 (Official Build) (64-bit), however, I encounter the issue: https://i.sstatic.net/2zJtR.png
I then pasted the code into Codeply. The results are consistent in both FF and Chrome. In FF, there are really thin 1px borders, while Chrome displays slightly thicker borders (but still uniform). Despite this, the problem persists on my local machine ...