0

I'm designing a .cshtml page using html and bootstrap. The page shows the objects from database in a card format, but they are uneven. This is how it looks:

enter image description here

This is my code:

@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")

Any ideas? I tried adding display flex but to no avail.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Dohn Joe
  • 25
  • 6

1 Answers1

-1

Did you try max-height property?, it can limit how big something gets (and overflows if it gets bigger).

This page explains it very well https://www.w3schools.com/cssref/pr_dim_max-height.php

Germán Gabriel
  • 1
  • 1