CODEWITHSUNDEEP
htmlcssbootstrap-5
Muhammad Hurrara
Muhammad Hurrara

Reputation: 11

Horizontal Display?

@foreach (var item in APModel)
{
    <div class="row row-cols-1 row-cols-md-2 g-4">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="https://images.pexels.com/photos/2360673/pexels-photo-2360673.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="...">
                <div class="card-body">
                    <h6 class="card-title">PropertyType: @item.PropertyType</h6>
                    <h6 class="card-title">PropertyStatus: @item.PropertyStatus</h6>
                    <h6 class="card-title">Price: @item.Price</h6>
                    <h6 class="card-title">Location: @item.Location</h6>
                    <h6 class="card-title">Rooms @item.TotalRooms</h6>
                    <h6 class="card-title">Baths @item.Bathrooms</h6>
                    <p class="card-text">@item.Description</p>
                    <button class="btn btn-outline-danger btn-sm"
                        @onclick="(()=>DeleteProperty(item.PropertyID))">
                        Del
                    </button>
                </div>
            </div>
        </div>
    </div>
}

I wanted to Display these cards horizantly but they keep getting displayed vertically what should i do please help

Upvotes: 1

Views: 30

Answers (1)

KnightTheLion
KnightTheLion

Reputation: 177

The display flex in CSS will solve this issue. I can't see your cards of course so you will have to handle the actual styling after this. You can also use grid styling for this as well.

.card-body {
      display: flex;
      justify-content: space-between;
     }
<div class="row row-cols-1 row-cols-md-2 g-4">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="https://images.pexels.com/photos/2360673/pexels-photo-2360673.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="...">
                <div class="card-body">
                    <h6 class="card-title">PropertyType: @item.PropertyType</h6>
                    <h6 class="card-title">PropertyStatus: @item.PropertyStatus</h6>
                    <h6 class="card-title">Price: @item.Price</h6>
                    <h6 class="card-title">Location: @item.Location</h6>
                    <h6 class="card-title">Rooms @item.TotalRooms</h6>
                    <h6 class="card-title">Baths @item.Bathrooms</h6>
                    <p class="card-text">@item.Description</p>
                    </div>
                    <button class="btn btn-outline-danger btn-sm"
                        @onclick="(()=>DeleteProperty(item.PropertyID))">
                        Del
                    </button>
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions