I'm currently working on a .cshtml page where I display database objects in a card format using HTML and Bootstrap. However, the cards are appearing unevenly as shown below:
https://i.sstatic.net/LbrrH.png
Here is the code snippet I am using:
@model IEnumerable<Cocktail>
@{
ViewData["Title"] = "List of Cocktails";
}
<div class="row">
@foreach (var item in Model)
{
<div class="col-md-4 col-xs-6 border-primary mb-3">
<div class="card mb-3" style="width: 540px;">
<div class="row g-0">
<div class="col-md-12">
<div class="card-header text-white bg-info">
<p class="card-text">
<h5 class="card-title">
@item.Name
<a class="text-white float-right"><i class="bi bi-pencil-square"></i></a>
</h5>
</p>
</div>
</div>
<div class="col-md-6">
{{--<img src="@item.ImageUrl" width="100%" alt="@item.Name">--}}
<img src="@item.ImageUrl" width="100%" alt="@item.Name">
</div>
<div class="col-md-6">
<div class="card-body">
<p class="card-text">@item.Description</p>
<p class="card-text"><b>Category: </b>@item.DrinkCategory</p>
</div>
</div>
<div class="col-md-12">
<div class="card-footer ">
<p class="card-text">
<a class="btn btn-outline-primary float-right" asp-action="Details" asp-route-id="@item.Id"><i class="bi bi-eye-fill"></i> Show Details</a>
<a class="btn btn-success text-white"><i class="bi bi-cart-plus"></i> Add to Cart (Price @item.Price.ToString("c"))</a>
</p>
</div>
</div>
</div>
</div>
</div>
}
</div>
@await Html.PartialAsync("_CreateItem", "Cocktails")
Looking for solutions on how to achieve even spacing between these cards. I attempted implementing display:flex without success.