Bootstrap 5.0 как центрировать по горизонтали блок внутри каруселя?
Bootstrap 5.0 как центрировать по горизонтали блок внутри каруселя? попробовал row justify-content-center но не помогло. Добавил text-align:center для класса carousel-inner тоже не помогло. Подскажите как это сделать?
.carousel-control-prev-icon, .carousel-control-next-icon {
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container" id="spe1y">
<span class="specialty_name">
<h2>Catalog</h2>
</span>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner" style="padding-bottom: 30px;">
<div class="carousel-item active">
<div class="row justify-content-center">
<div class="col-md-4 d-flex align-items-stretch">
<div class="card mb-3 box-shadow" style="max-width: 20rem; min-width: 20rem;border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<img src="/images/5.jpg" class="card-img-top" alt="sea11" style="border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-success">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 d-flex align-items-stretch">
<div class="card mb-3 box-shadow" style="max-width: 20rem; min-width: 20rem;border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<img src="/images/6.jpg" class="card-img-top" alt="sea10" style="border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-success">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 d-flex align-items-stretch">
<div class="card mb-3 box-shadow" style="max-width: 20rem; min-width: 20rem;border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<img src="/images/7.jpg" class="card-img-top" alt="seaq4" style="border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-success">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-md-4 d-flex align-items-stretch">
<div class="card mb-3 box-shadow" style="max-width: 20rem; min-width: 20rem;border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<img src="/images/9.jpg" class="card-img-top" alt="seaq78" style="border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-success">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 d-flex align-items-stretch">
<div class="card mb-3 box-shadow" style="max-width: 20rem; min-width: 20rem;border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<img src="/images/10.jpg" class="card-img-top" alt="seaqq74q" style="border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-success">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 d-flex align-items-stretch">
<div class="card mb-3 box-shadow" style="max-width: 20rem; min-width: 20rem;border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<img src="/images/11.jpg" class="card-img-top" alt="se1qq" style="border-radius: 2em;text-align: center;box-shadow: 0 5px 10px rgba(0,0,0,.2);">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-success">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>