1

I'm trying to align Bootstrap 4 cards and using d-flex along with align-self-stretch for the cards themselves. Which is great.

However, I can't figure out how to get the part with the red border to float to the bottom. Any ideas by using Bootstrap 4 utilities only?

bootstrap 4 cards

<div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch">
    <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="align-self-end border border-danger">
                <p class="text-uppercase mb-0">Donors: 123</p>
                <p class="text-uppercase">Funded: $1,234</p>
                <a href="#" class="btn btn-info btn-block">View Details</a>
            </div>
        </div>
    </div>
</div>
Dario Zadro
  • 1,143
  • 2
  • 13
  • 23
  • working on it _ though it would have been easier to have the code for all three cards _ can you add the rest? #JustSaying – inputforcolor Oct 03 '19 at 23:27
  • Thanks! The code is the same for all 3 cards, just different char length for `card-title` and `p text-muted` items. – Dario Zadro Oct 03 '19 at 23:36
  • well nothing seems to be working that I've tried _ In this question (which might be classed as a duplicate of yours?) there's a discussion that achieving vertical alignment within parents needs external CSS _ Check out the bottom answer >>> https://stackoverflow.com/questions/48391500/bootstrap-4-align-bottom – inputforcolor Oct 03 '19 at 23:44
  • 1
    check out another answer here >>> https://stackoverflow.com/questions/48719567/css-class-align-self-end-not-working _ there's a solution and explanation as to why `align-self` doesn't work with `card` – inputforcolor Oct 04 '19 at 00:00
  • 1
    Awesome, that 2nd question worked to solve my issue. – Dario Zadro Oct 04 '19 at 00:21

1 Answers1

4

Thanks to inputforcolor for help with the solution below, which keeps the cards the same height AND pushes the part I was looking for to the bottom.

<div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch">
    <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
            <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="mt-auto border border-danger">
                <p class="text-uppercase mb-0">Donors: 123</p>
                <p class="text-uppercase">Funded: $1,234</p>
                <a href="#" class="btn btn-info btn-block">View Details</a>
            </div>
        </div>
    </div>
</div>
Dario Zadro
  • 1,143
  • 2
  • 13
  • 23
  • thanks for the tag ; ) perhaps you should mention `d-flex` and `flex-column` in the text so that your answer highlights the changes you made _ Makes it more useful for others ; ) – inputforcolor Oct 04 '19 at 00:39
  • 1
    Good idea. Did you want to post a more full answer? I would be happy to accept your answer :) – Dario Zadro Oct 04 '19 at 00:44
  • 2
    Accepted answer would make me an SO reviewer _ but it wasn't really 'my' solution so I'm good thanks _ Pleased we found your answer _ Take Care Dario – inputforcolor Oct 04 '19 at 00:57