コンテンツの量が違う時に横をそろえたい

Question

bootstrapと独自にcss追加でwebサイトを制作しています。
（Laravelで実装しています）

データベースからとってきた情報を、foreachで取り出して4列に並べているのですが、テキストの量でボタンの位置などがバラバラになってしまいます。。
横一列にそろえる方法を教えていただけませんでしょうか？

やりたいこと

一番左の猫の説明が2行なので、他の猫達とボタンの位置がずれてしまいました。
そろえる方法、ありますでしょうか？

コード

index.blade.php

<h1 class="contents-title mt-5">家族募集中のCats<i class="fas fa-cat"></i></h1>

    <div class="row">
        
    @if (count($cats) > 0)
    @foreach ($cats as $cat)
    
        <div class="col-xs-12 col-md-3 text-center contents-cats mb-5">
            <div class="contents-cats-image">
                <a href="{{ action('HomeController@show', $cat->id) }}">
                    <img src="{{ $cat->mainimage_path }}">
                </a>
            </div>
            <div class="caption">
                <div class="inline-block">
                    {{ $cat->gender }} <i class="fas fa-paw"></i> {{ $cat->age }}歳
                </div>
                <div class="inline-block">
                    @include('commons.favorite_button', ['cat' => $cat])
                </div>
                
                <div class="copy">
                    <p>{{ $cat->catch_copy }}</p>
                </div>
                @include('commons.apply_button', ['cat' => $cat]) 
                
            </div>
        </div>
    
    @endforeach
                {{ $cats->links('pagination::bootstrap-4') }}
    
    @endif
    </div>

css（この部分は以下しか追加していません）

.contents-cats-image img {
    width: 100%;
    height:200px;
    margin:auto;
    background-size: cover;
    object-fit: cover;
}

.contents-cats img:hover{
  opacity: 0.6;
  /*transform: scale(1.1);  拡大*/
  transition-duration: 0.5s;
}

試したこと

https://beginners-high.com/css-flexbox-height/
を、参考に、<div class="row">にcatrowを追加して<div class="row catrow">とし、
cssに

.catrow {
  display:flex;
}

を追加しても変化なし。。。

display:flex;を

<div class="col-xs-12 col-md-3 text-center contents-cats mb-5 catrow">

に付けたら

このようになってしまい、失敗・・・

他にアドバイスあれば、お願いいたします。。

Comments

[kyoya0819]

渡されるデータの例をお願いします。

[mikeko0901]

ご連絡ありがとうございます。スマホから失礼します

<img src="{{ $cat->mainimage_path }}">
…猫の写真

{{ $cat->gender }} <i class="fas fa-paw"></i> {{ $cat->age }}歳
…性別、肉球、年齢

@include('commons.favorite_button', ['cat' => $cat])
…ハートのボタン

{{ $cat->catch_copy }}
…猫の説明部分

@include('commons.apply_button', ['cat' => $cat])
…申し込みする/取り消し　のボタン

となっております。

Answer 1

col-xs-12 col-md-3 text-center contents-cats mb-5のどれかにposition:relative;をかけて、
@include('commons.apply_button', ['cat' => $cat]) をcaptionの後に出して、divタグで囲って(このdivがcaptionの兄弟になる)適当にclass名つけて、position:absolute; transform: translateX(-50%); left: 50%; bottom: 適当px;
ではどうですかね？
bootstrapとかLaravelはよくわからずに喋っています。

Comments

[mikeko0901]

アドバイスありがとうございます！できました！

Answer 2

Bootstrap を使っているのであれば、グリッドカードを使うのがいいと思います。

    <div class="row row-cols-1 row-cols-md-4 text-center">
      <div class="col mb-5">
        <div class="card h-100 contents-cats">

ボタンは .card-footer へ。

            <div class="card-footer">

https://getbootstrap.com/docs/4.4/components/card/#grid-cards

Comments

[mikeko0901]

ご回答ありがとうございます！グリッドカード使ってみます！

Answer 3

ボタンに btn というクラス名が付いているとして、下記のような感じでどうでしょうか。

.contents-cats {
  position: relative;
  padding-bottom: 40px;
}
.contents-cats .btn {
  color: white;
  background-color: olive;
  height: 40px;
  border-radius: 20px;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: 5px;
}

Codepenサンプル

Comments

[mikeko0901]

ありがとうございます！できました！
コードまでいただき、とても助かりました！