In bootstrap I am trying to make an image gallery for our webpage. We are using the latest version of bootstrap and we have our images, but there is just one thing. Our images are different sizes and every time it switches to the next image it changes the whole size of the gallery. I was wondering if there was a way to have just whitespace or blackspace fill the area that it doesn't change the size of the gallery.
<h2>Galleries</h2>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/Gallery_1.jpeg" class="d-block w-100" alt="Thompson Machinery">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Thompson Machinery</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/Gallery_2.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Second slide label</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/Gallery_3.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Third slide label</h5>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>This will help you i guess
Wraping images inside a container
<div class="image-container">
<img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="...">
</div>
and give a height and width properties to that container
.image-container{
width: 500px;
height: 500px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
position: relative;
display: grid;
place-content: center;
}
.image-container{
width: 500px;
height: 500px;
border: 1px solid blue;
display: grid;
place-content: center;
}
img{
max-width:100%;
display: block;
}<h2>Galleries</h2>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="image-container">
<img src="https://source.unsplash.com/random/300x150" alt="Thompson Machinery">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Thompson Machinery</h5>
</div>
</div>
<div class="carousel-item">
<div class="image-container">
<img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="...">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Second slide label</h5>
</div>
</div>
<div class="carousel-item">
<div class="image-container">
<img src="https://source.unsplash.com/random/200x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Third slide label</h5>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>