title: Is there a way for a bootstrap gallery not to change size because the dimensions of the pictures are different?
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h2&gt;Galleries&lt;/h2&gt;
            &lt;div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"&gt;
              &lt;div class="carousel-inner"&gt;
                &lt;div class="carousel-item active"&gt;
                  &lt;img src="images/Gallery_1.jpeg" class="d-block w-100" alt="Thompson Machinery"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;h5 class="galleryCaptions"&gt;Thompson Machinery&lt;/h5&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="carousel-item"&gt;
                  &lt;img src="images/Gallery_2.jpeg" class="d-block w-100" alt="..."&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;h5 class="galleryCaptions"&gt;Second slide label&lt;/h5&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="carousel-item"&gt;
                  &lt;img src="images/Gallery_3.jpeg" class="d-block w-100" alt="..."&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;h5 class="galleryCaptions"&gt;Third slide label&lt;/h5&gt;
                  &lt;/div&gt;
           &lt;button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"&gt;
                &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="visually-hidden"&gt;Previous&lt;/span&gt;
              &lt;/button&gt;
              &lt;button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"&gt;
                &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="visually-hidden"&gt;Next&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>