How to recolor bootstrap cards border color?-CodePudding

So, i was using bootstrap cards to make like my webpage look neat and stuff. The default color for bootstrap cards is white. With a navbar you can just set the color options at the top as navbar-dark or something, but in here you can't do that, so i had to manually set the color to the cards. Everything went well, but however one tiny thing that annoys me is the border. The border separating the header and the title. The border is only visible as black and since i recolored the card to black you can't see it.

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  style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
    <h5  style="color: white" >Time Managing</h5>
    <div  style="color: white" >
      <h5 >Prioritization</h5>
      <p >Additional content.</p>
      <a href="#" >Learn More</a>
    </div>
  </div>

I tried using the and giving it a style of

.card {
  border: color: white;
}

I was expecting the border to you know, turn white, because most borders are used with the border tag, but that didn't work.

Does anyone have any ideas or answers to try to fix this problem?

CodePudding user response：

It seems that on card-header, you could either use a Bootstrap class such as border-bottom border-light, or specify a custom class or inline style with border-bottom: 1px solid #fff for this.

More about border classes on Bootstrap: documents

More about inline style for border: MDN

Example:

main {
background-color: #333;
color: #fff;
padding: 20px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<main>
<p>With Bootstrap class