0

working on a small personal project just to test my ability in Django and Bootstrap. Currently I am able to retrieve a list of quizzes to which their respective details are displayed in an individual card using a for loop, however some of the quizzes have different heights due to the description of each quiz being varied in length. It looks horrific and I am wondering how I can make all of the cards the same height as the highest/tallest card, I've explored using flexboxes for this kind of thing but the first card in the row shrinks in width.

Here is my current code and what it looks like in the browser:

<div class="row p-2 justify-content-center">
   {% for obj in filter.qs %}
       <div class="col-md-4 mt-4">
           <div class="card p-2" id="quiz">
                <div class="card-body">
                    <div class="row">
                         <div class="col-md-10">
                             <h5 class="card-title">{{ obj.Name }}</h5>
                          </div>
                          <div class="col-md-2 text-right">
                              <i class="far fa-heart"></i>
                          </div>
                    </div>
                    <h6 class="card-subtitle mb-2 text-muted">By: {{ obj.Author }}</h6>
                    <h6 class="card-subtitle mb-2 text-muted">Points: {{ obj.Points_Worth }}</h6>
                    <h6 class="card-subtitle mb-4 text-danger">Category: <a href="">{{ obj.Category }}</a></h6>
                    <p class="card-text">{{ obj.Description }}</p>
                    <a href="#" class="btn btn-primary w-100 mt-auto">Play Quiz</a>
                 </div>
            </div>
        </div>
    {% endfor %}
</div>

Visual representation of code

Ideally, I'd like all cards to be the same height despite the content in the description, with the button being bottom-justified.

I've tried using JavaScript to retrieve all columns with the class 'col-md-4' and using a maximum algorithm to retrieve the highest height then apply this to each column, however I had no luck with this.

Update: applied h-100 to the cards which resulted in them all being the same height (ideal), however the button will not position itself at the bottom using mt-auto.

I'm open to trying different methods to achieve this so all help is appreciated! If you need more information don't hesitate to ask!

Andrew Crossan
  • 45
  • 7
  • You could put `text-overflow: ellipsis;` on the `card-text` a fixed `height` on `card-body` and `position: absolute; bottom: 0;` on your button. – kpie Jul 27 '22 at 21:57
  • @kpie gave this a try, works for the best part with the exception of the button moving out of the card and not respecting any padding, could definitely be a solution with some tinkering, cheers! – Andrew Crossan Jul 27 '22 at 22:02
  • You can try a little bit of javascript and checking for the max height of text out of all and give that height to all others or checking max height of whole container and use that for others. Here is a example of it: https://stackoverflow.com/a/69727173/16846346 – Rana Jul 27 '22 at 22:15

1 Answers1

0

the problem was fixed by applying proper flexbox CSS, I may have made a mistake while reading a previous solution as the one I am using now works perfectly, applying h-100 to the cards, applying d-flex and flex-column to the card-body and using mt-auto on the button fixed the issue.

{% for obj in filter.qs %}
                    <div class="col-md-4 mt-4 justify">
                        <div class="card p-2 h-100" id="quiz">
                            <div class="card-body d-flex flex-column">
                                <div class="row">
                                    <div class="col-md-10">
                                        <h5 class="card-title">{{ obj.Name }}</h5>
                                    </div>
                                    <div class="col-md-2 text-right">
                                        <i class="far fa-heart"></i>
                                    </div>
                                </div>
                                <h6 class="card-subtitle mb-2 text-muted">By: {{ obj.Author }}</h6>
                                <h6 class="card-subtitle mb-2 text-muted">Points: {{ obj.Points_Worth }}</h6>
                                <h6 class="card-subtitle mb-4 text-danger">Category: <a href="">{{ obj.Category }}</a></h6>
                                <p class="card-text">{{ obj.Description }}</p>
                                <br>
                                <a href="#" class="btn btn-primary w-100 mt-auto">Play Quiz</a>
                            </div>
                        </div>
                    </div>
Andrew Crossan
  • 45
  • 7