CODEWITHSUNDEEP
csstwitter-bootstrapborderbootstrap-4
GradDev
GradDev

Reputation: 411

Border between card-img-top and card-body

I want to have a border between the image and the card-body in a bootstrap card. I have a CSS as follows-

.card{
  border-width: 6px;
  border-color: rgb(255, 255, 255);
  border-radius: 0;
  background-color: transparent;
}

.card-body{
  border-top-width: 5px;
  border-top-color: rgb(255, 255, 255);
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

HTML-

<div class="col-md-4">
  <div class="card">
    <img class="card-img-top" alt="Depression" src="images/depression.jpg">
    <div class="card-body">
        <h3 class="card-title">DEPRESSION</h3>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

What I want-

Card design I want

What I'm Getting-

Card design I'm Getting

All help is appreciated, thanks.

Upvotes: 0

Views: 2445

Answers (1)

Temani Afif
Temani Afif

Reputation: 272742

Border style is mandatory in order to use border. As you can read here :

Note: None of the OTHER CSS border properties described below will have ANY effect unless the border-style property is set!

so you may try this code :

.card-body{
  border-top-width: 5px;
  border-top-color: rgb(255, 255, 255);
  border-top-style:solid;
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

Or simply do this :

.card-body{
  border-top: 5px solid rgb(255, 255, 255);
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

Upvotes: 1

Related Questions