Best way to display gallery page with multiple images using boostrap 4

HTML-CSS
1

Hi,
Which is the best way to display a page with multiple images using bootstrap 4.
The page is similar to this:

image
image1083×632 103 KB

Is it possible to have a sample html & css code ?
Thank you.

2

We arent going to write the code for you. If you have attempted to make this then you can share your code and we can help with any issues you are facing

Have you looked at the bootstrap documentation to see what they offer when it comes to this? That would be the first place to start

3

I’m new to this. This is what I have done so far, but not sure if it is any good .

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Gallery</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .gallery-img {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <h1 class="mt-5 mb-4 text-center">Gallery</h1>
  <div class="row">
    <div class="col-md-4">
      <img src="img1.jpg" alt="Image 1" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img2.jpg" alt="Image 2" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img3.jpg" alt="Image 3" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img4.jpg" alt="Image 4" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img5.jpg" alt="Image 5" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img6.jpg" alt="Image 6" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img7.jpg" alt="Image 7" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img8.jpg" alt="Image 8" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img9.jpg" alt="Image 9" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img10.jpg" alt="Image 10" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img11.jpg" alt="Image 11" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img12.jpg" alt="Image 12" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img13.jpg" alt="Image 13" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img14.jpg" alt="Image 14" class="img-fluid gallery-img">
    </div>
    <div class="col-md-4">
      <img src="img15.jpg" alt="Image 15" class="img-fluid gallery-img">
    </div>
  </div>
</div>
</body>
</html>
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.