My current project involves creating an Owl Carousel. Here is the code I have implemented so far:
<div class="owl-carousel owl-theme">
@foreach (var item in Model.Books)
{
<div class="item">
<div class="card">
<img src="~/@item.Src" alt="Owl Image">
<div class="card-body">
@item.Name
</div>
</div>
</div>
}
</div>
Additionally, here is the CSS applied to the project:
<style>
body {
background-color: #f6f6f6;
}
.item {
background-color:yellow;
}
.card{
padding:10px 30px 10px 30px;
}
</style>
I am currently facing a challenge where I want all sections with the yellow background (.item) to have the same height. How can this be achieved?