Align bootstrap-cards contents

Question

As you can see from the image, the last line of text is not aligned with the others (of the other bootstrap-cards). Logically this fact depends mainly on the size of the upp

Answer 1

You would either have to tweak the CSS Flexbox on the card to get your elements to line up. Or you could use Bootstrap's card-footer class which will place any content at the bottom. Then you could modify the css properties on the card footer to make it look however you want.

<div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
<div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
    <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
    <div class='card-body'>
        <h5 class='card-title' style='color: #293a44;'>TITOLO</h5>
        <p class='card-text'>Breve descrizione</p>
        <p class='card-text'>
            <span class='h5 text-muted'>Montepremi</span>";
            <small style='padding-left: 125px;' class='text-muted'>data</small>
        </p>
    </div>
    <div class="card-footer>
        Footer Text here
    </div>
</div>

This would be the easiest way in my opinion.

The flexbox method would required setting the card-body as display: flex using CSS. Then making sure the flex-direction is set to column and justify-content to space-between.

Note: The Bootstrap 4 card component is actually set to display as flex. Therefore the card-body is a flex item. You may run into problems. Have a play around.

For more information on flexbox click here.