Reply To: Flex Box

#10045969
Support
Keymaster

Hi, for that you need a custom css, here’s an example:

HTML:

<div class="owl-carousel custom-carousel-1 owl-theme nav-bottom nav-lg nav-transparent nav-borders rounded-nav" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'margin': 20, 'autoHeight': true, 'loop': true, 'nav': true, 'dots': false, 'stagePadding': 0}">
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
	<div class="py-4">
		<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
			<div class="card-body">
				<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
			</div>
		</div>
	</div>
</div>

CSS (css/custom.css)

.custom-carousel-1 .owl-stage {
	display: flex;
}

.custom-carousel-1 .owl-item {
	display: flex;
	flex: 1 0 auto;
}

.custom-carousel-1 .card {
	height: 100%;
}