Align elements in separate divs

Question

Using Bootstrap 4, I have created a card-deck with two cards. Although both cards are the same height, elements are not in the same spot due to the length of text from other elements.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <a>
        <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
      </a>
      <h5 class="card-title">Get to Know...FirstName LastName</h5>
      <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>

  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <a>
        <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
      </a>
      <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
      <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>

</div>

How can I make sure my "Read More" buttons are aligned with each other?

You could give the cards a `min-height` and make the read more button appear in the bottom of the card. — Marc Hjorth, Aug 06 '18 at 20:01

Carol Skelly · Answer 1 · 2018-08-06T20:47:28.467

You can use d-flex flex-column to make the card-body flex-direction column, and then mt-auto (margin-top:auto) to push the buttons to the bottom of each card...

<div class="container">
    <div class="card-deck">
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Get to Know...FirstName LastName</h5>
                <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
                <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/nxTqqN1uWC

This solution doesn't require altering the structure of the card as all content should remain in the card-body.

score 0 · Answer 2 · answered Aug 06 '18 at 20:17

The content of your cards are not taking the same height. If you see, one of the headers take up 2 lines in a small window compared to the other. There are multiple ways to solve this. One way is to assign the width to the title and then put an ellipsis for the overflow. Similarly you can do this for the body. After controlling the height of everything before the button, your content will then align.

For ellipsis:

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}

score 0 · Answer 3 · answered Aug 06 '18 at 20:36

Card already has a flex so you may have to add a "text container" to padd the bottom (the button height plus some extra margin: like 2.5rem) and make the button positioned absolute to card-body bottom (same distance/size as the card-body margin : 1.5rem)

.card-body {
  position: relative;
}

.card-body .emp-container {
  padding-bottom: 2.5rem;
}

.card-body .btn {
  position: absolute;
  bottom: 1.25rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Get to Know...FirstName LastName</h5>
        <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social
          Responsibility Officer, Executive Vice President.</p>
      </div> <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
        <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
      </div>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
</div>

Align elements in separate divs

3 Answers3