How to recolor bootstrap cards border color?

Question

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 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 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?

Answer 1

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 </p>
<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
  <h5 class="card-header border-bottom border-light" 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>
<br/>
<p>With inline style </p>
<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
  <h5 class="card-header" style="border-bottom: 1px solid #fff; 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>
</main>

Answer 2

Hello it looks like the syntax of your css if off slightly try this.

.card {
  border-color: white;
}

After the color should be where you define the color generally shouldn't have more than one per line as so <css-property>:<value>; and in this case the css-property you want to modify is the border-color and the value is white.

Looking at your comments on the other answer, If it is the border on the bottom of .card-header you should set the same border-color value on the .card-header class making sure the class you are modifying already has other required border properties like width on it.

Using the dev tools on whatever browser you are on for debugging is very handy in these situations also. This will allow you to inspect and modify different css styles in browser. I often do this before adding css code to make sure the styles are correct and will function, especially when using third party frameworks like Bootstrap.

Answer 3

this should be fixed in 5.3 but on earlier versions you can use this

.card.text-bg-dark {
  --bs-card-border-color: #C3CBD2;
}

assuming you use .text-bg-dark

#C3CBD2 is the default border of the BS5 Card. I forgot what variable it is