レイアウトでBootstrapを使い、CSS:hoverで色を変えたい場合はclassにborder-xxxは使わない

カーソルを置く⇦⇨離すで、要素のボーダーの色を黒⇦⇨赤に変えようとしたが、なかなか上手くいかなかったが、解決したのでまとめてみました。
before

<divclass="card border-dark rounded-lg">

.card{border-width: 2px;}.card:hover{border-color: red;}

以下のように修正したら上手くいきました。
after

<divclass="card rounded-lg">

.card{border-width: 2px;border-color: black;}.card:hover{border-color: red;}

Bootstrapのクラスのborder-darkが邪魔をしていたみたいです。Bootstrapは確かに便利なのですが、:hoverなどを使って色などを調整する場合は、CSSで行うのがいいみたいですね。