how do i create a photo collage with html css and bootstrap

I tried adding images to the div it did't work for me,

<img
                  class="img-fluid"
                  src="https://via.placeholder.com/800x800"
                  style="border-radius: 20px"
                />

Therefore I tried adding background images to divs, and when i add images to the divs the images wont show?can anyone tell me a solution to this and why this is hapenning?

<div class="col-lg-6">
            <!-- ??????? how do i create the grid -->
            <div class="row g-0">
              <div class="col-lg-4">
                <div
                  class="imgcollage"
                  style="background-image: url(../img/img2.jpg)"
                ></div>
              </div>
              <div class="col-lg-8">
                <div
                  class="imgcollage"
                  style="background-image: url(../img/img2.jpg)"
                ></div>
              </div>
            </div>
            <div class="row g-0">
              <div class="col-lg-8">
                <div
                  class="imgcollage"
                  style="background-image: url(../img/img2.jpg)"
                ></div>
              </div>
              <div class="col-lg-4">
                <div
                  class="imgcollage"
                  style="background-image: url(../img/img3.jpg)"
                ></div>
              </div>
            </div>
          </div>

here's the css

.imgcollage {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}



Read more here: https://stackoverflow.com/questions/68464206/how-do-i-create-a-photo-collage-with-html-css-and-bootstrap

Content Attribution

This content was originally published by Pankaja Chalaru at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: