How to set the backgroundcolor of a Bootstrap card fo the whole column?

Question

I've got a questtion about the Bootstrap Card Deck. I create a Card Deck with two cards in a row. On the first card I've got some text under the header and in the second card there is no text under the header. In this case the grey color does not fill the whole card as you can see in the example. How can I fix it, that the hole column is also grey?

Thanks for your help!

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css"> <div class="card-deck mb-5"> <a href="#" class="card hoverable"> <div class="card-body p-0"> <div class="row mx-0"> <div class="col-md-8 grey lighten-4 rounded-left pt-2"> <h5 class="font-weight-bold">Header</h5> <p class="font-weight-light text-muted mb-2">Some text</p> </div> <div class="col-md-4 text-center pt-3"> <p class="h2 font-weight-normal">60</p> </div> </div> </div> </a> <a href="#" class="card hoverable"> <div class="card-body p-0"> <div class="row mx-0"> <div class="col-md-8 grey lighten-4 rounded-left pt-2"> <h5 class="font-weight-bold">Header</h5> <!-- <p class="font-weight-light text-muted mb-2">No text</p> --> </div> <div class="col-md-4 text-center pt-3"> <p class="h2 font-weight-normal">50</p> </div> </div> </div> </a> </div>

Answer 1

If you want to have the height be equals the container, you can use h-100 on the div row mx-0 . More information can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css"> <div class="card-deck mb-5"> <a href="#" class="card hoverable"> <div class="card-body p-0"> <div class="row mx-0"> <div class="col-md-8 grey lighten-4 rounded-left pt-2"> <h5 class="font-weight-bold">Header</h5> <p class="font-weight-light text-muted mb-2">Some text</p> </div> <div class="col-md-4 text-center pt-3"> <p class="h2 font-weight-normal">60</p> </div> </div> </div> </a> <a href="#" class="card hoverable"> <div class="card-body p-0"> <div class="row h-100 mx-0"> <div class="col-md-8 grey lighten-4 rounded-left pt-2"> <h5 class="font-weight-bold">Header</h5> <!-- <p class="font-weight-light text-muted mb-2">No text</p> --> </div> <div class="col-md-4 text-center pt-3"> <p class="h2 font-weight-normal"></p> </div> </div> </div> </a> </div>

Answer 2

Ideally you should not play around with left/right margins of row and col in bootstrap. You should use no-gutters class with row to have the effect you want. Additionally, you should add h-100 on the second row to take full height. Also a better way to center align your number is like I have done in the snippet by using justify-content-center d-flex align-items-center .

Also your code was missing a container element so that scrollbar was coming in your snippet. I have added that too.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css"> <div class="container"> <div class="card-deck mb-5"> <a href="#" class="card hoverable"> <div class="card-body p-0"> <div class="row h-100 no-gutters"> <div class="col-md-8 grey lighten-4 rounded-left"> <h5 class="font-weight-bold p-2">Header</h5> <p class="font-weight-light text-muted mb-2 px-2">Some text</p> </div> <div class="col-md-4 text-center justify-content-center d-flex align-items-center"> <p class="h2 font-weight-normal">60</p> </div> </div> </div> </a> <a href="#" class="card hoverable"> <div class="card-body p-0"> <div class="row h-100 no-gutters"> <div class="col-md-8 grey lighten-4 rounded-left"> <h5 class="font-weight-bold p-2">Header</h5> <!-- <p class="font-weight-light text-muted mb-2 px-2">No text</p> --> </div> <div class="col-md-4 text-center justify-content-center d-flex align-items-center"> <p class="h2 font-weight-normal">50</p> </div> </div> </div> </a> </div> </div>

Please check the code differences https://i.stack.imgur.com/0Q2IX.png

Answer 3

Using anchor tag as it will not consider a height and width so you have to set a class in card-body using this class="card-body p-0 grey lighten-4" .

Remove the class "grey lighten-4" from class="col-md-8 rounded-left pt-2" & set to class="card-body p-0 grey lighten-4"

.grey {
    background-color: #f5f5f5 !important;
}

/*OR*/


.grey.lighten-4 {
    background-color: #f5f5f5 !important;
}


<div class="card-deck mb-5">
  <a href="#" class="card hoverable">
    <div class="card-body p-0 grey lighten-4">
      <div class="row mx-0">
        <div class="col-md-8 rounded-left pt-2">
         ...
        </div>
        <div class="col-md-4 text-center pt-3">
         ...
        </div>
      </div>
    </div>
  </a>  
</div>