Выравнивание записей в сетке с 4 столбцами с Bootstrap

Question

Может ли кто-нибудь посоветовать, как можно выровнять записи в виде сетки из 4 столбцов? В настоящее время сообщения / списки появляются друг на друга. Я использую Laravel с Boostrap.

<div class="container">
    <div class="media-container-row pt-5 ">
        <div class="card p-3 col-12 col-md-3 col-lg-3">
            <div class="card-wrapper ">
                <div class="card-img">
                    <div class="mbr-overlay"></div>
                    <div class="mbr-section-btn text-center"></div>

                        <a href="http://127.0.0.1:8000/properties/{{$property->id}}"><img style=width:100% src="/storage/cover_images/{{$property->cover_image}}" alt="No Image" ></a>

                            <div class="card-box">               
                            Price:<br>
                            Location:<br>
                            Availabilty:<br>
                            Listed on: {{$property->created_at}}<br>
                </div>
            </div>        
        </div>
    </div>  
</div>