I'm in the process of creating a single-page website with sections stacked on top of each other, including a section where divs are stacked both next to and on top of each other. Within this section, there is a container div that holds 5 divs named box, arranged in a grid format. Each box contains a logo, a title, a paragraph, and a carousel, all stacked vertically. The issue I'm facing is with the alignment of the carousel slides within the box divs; I wish to align them uniformly.
I attempted to address this by positioning the container div (parent) as relative and the box div (child) as absolute with a bottom value of 0px, but this caused the carousel to appear squished. Is there a way to achieve the desired alignment without relying on positioning? If not, any guidance on the correct approach would be greatly appreciated. Thank you in advance.
Here is the code snippet for the box. There are 5 of these snippets within the container div. For brevity, I've included only one box element in the code snippet:
.box {
flex: 1 calc(25%);
margin: 5px;
color: white;
font-size: 3vh;
text-align: center;
padding-top: 10%;
padding: 5vh 5vh 5vh 5vh;
}
.container {
display: flex;
flex-wrap: wrap;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="box box1 ">
<img src="https://via.placeholder.com/100/" width="30%" height="auto">
<p>Live Streaming</p>
<p class="service-content">We do live streaming everywhere in Gauteng. We are passionate lorem lorem lorem.</p>
<div class="img-slide">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/150/" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/150/" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/150/" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>Current alignment:
Result when using positioning: