I have a button group inside the footer of my cards that takes up some space. In the past, I wrapped each individual card in a div like this:
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3"></div>
Now, my goal is to ensure that all cards are of the same height. I attempted to achieve this using card decks. While I was successful in setting the height as desired, the cards end up staying adjacent for too long, causing the button group to extend beyond the card's boundaries. Here is an image showing how it looks:
https://i.sstatic.net/Rv3SO.png
I then tried integrating the col-12 specifications into the card tag like so:
<div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col"></div>
Unfortunately, this didn't yield the desired outcome. How can I meet both objectives: ensuring uniform height and sufficient width for the button group?
Specifically, I aim to leverage the height feature of card-deck along with Bootstrap's grid system so that the columns are arranged as follows:
||||
Which should transition to:
||
||
And finally transform into:
|
|
|
|
EDIT - complete code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row card-deck">
<div class="card my-3">
<div class="card-body">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Date</h6>
<p class="card-text">Description</p>
</div>
<div class="card-footer">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary viewActivity">View</button>
<button type="button" class="btn btn-success editActivity">Edit</button>
<button type="button" class="btn btn-danger deleteActivity">Delete</button>
</div>
</div>
</div>
</div>Solution
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.card {
height:100%;
}
</style>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"></h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text"></p>
</div>
<div class="card-footer">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary viewActivity">View</button>
<button type="button" class="btn btn-success editActivity">Edit</button>
<button type="button" class="btn btn-danger deleteActivity">Delete</button>
</div>
</div>
</div>
</div>
</div>