CODEWITHSUNDEEP
htmlcssbootstrap-4owl-carouselowl-carousel-2
nnmmss
nnmmss

Reputation: 2992

making the height the same of all items in owl Carousel

I am making an Owl Carousel. So I did this

 <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>

and this is CSS

  <style>
        body {
            background-color: #f6f6f6;
        }

        .item {
            background-color:yellow;
        }
        .card{
            padding:10px 30px 10px 30px;
        }
    </style>

how can I make the yellow section(.item) of all items the same height?

Upvotes: 0

Views: 2863

Answers (1)

Aleksandr Abramov
Aleksandr Abramov

Reputation: 540

Set CSS style for .owl-stage:

.owl-carousel .owl-stage {
  display:flex !important 
/*!important not required but maybe need if there some others css rules for .owl-stage display */
}

Dont use align-items property and .owl-item get height 100% from the highest item from this carousel items.

Upvotes: 0

Related Questions