0

How to align at the bottom a flex-row inside a card? I currently have two cards aligned side by side but when one of the texts is smaller than the other the divs that contain "(100)(100)" lose their alignment.

I'm aware of questions likes this one but I have tried their solutions and nothing worked.

Running example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="row mb-2">
      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary"">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-01-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-0 ml-0 pl-0 ">
                <!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>


          </div>
        </div>
      </div>

      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary"">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-02-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-0 ml-0 pl-0 ">
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>


</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Miguel
  • 2,738
  • 3
  • 35
  • 51

1 Answers1

1

If you add d-flex flex-column in card-body div and mt-auto in bottom div, will solve your problem.

Full code below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="row mb-2">
      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body d-flex flex-column">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-01-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-auto ml-0 pl-0 ">
                <!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>


          </div>
        </div>
      </div>

      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body d-flex flex-column">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-02-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-auto ml-0 pl-0 ">
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>


</div>
</body>
</html>
Anwar Hossen
  • 536
  • 5
  • 11