نحوه تراز کردن col ها به صورت افقی bootstrap

اول اینکه: کدهاتون رو قرار بدین.
دوم: راه حلش سادس، ارتفاع ثابتی رو بهشون بدین درست میشه. مثلا ارتفاع همشون رو بدین 500 پیکسل.

@milad

من از card بوت استرپ استفاده کردم بشرح زیر :

 <div class="col-sm-12 col-lg-3 col-md-6">
                            <div class="card mb-4">
                                <div class="hovereffect">
                                    <a href='{{route('SinglePost',$top->slug)}}'>
                                        <img class="card-img img-fluid" src="{{$top->img}}" alt="{{$top->title}}">
                                    </a>
                                </div>
                                <div class="card-body pb-0">
                                    <h5 class="card-title">{{$top->title}}</h5>
                                    <p class="card-text">{{$top->short_body}}</p>
                                    <div class="row bg-light p-2">
                                        <div class="col-12">
                                            @foreach($top->category as $cat)
                                                <a href="" class="p-1 badge-success text-decoration-none" style="font-size: 13px">{{$cat->name}}</a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer p-0">
                                    <div class="row p-3">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-6"><a class="text-decoration-none"
                                                                      href="{{route('show_profile',$top->user->acc_name)}}">{{$top->user->full_name}}</a>
                                                </div>
                                                <div class="col-6">
                                                    <ul class="list" style="list-style: none">
                                                        <li class="{{'post'.$top->id}} like float-left red fa
                                                            @if(! auth()->check())
                                                            fa-heart-o
                                                            @elseif(auth()->check())
                                                        {{! auth()->user()->has_like($top->id) ? 'fa-heart-o' : 'fa-heart'}}
                                                        @endif
                                                            " post-id="{{$top->id}}" onclick="return like(this)"></li>
                                                        <li class="float-left {{'like_count'.$top->id}}">{{$top->like_count}}</li>
                                                        <li class="float-left fa fa-eye"></li>
                                                        <li class="float-left">{{$top->view_count}}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

اینم راه حل در بوت استرپ:
https://getbootstrap.com/docs/4.0/components/card/#card-layout