How to add new images in the bootstrap grid of images

There are a few ways to add new images to a Bootstrap grid in HTML, depending on how you want the new images to be displayed and how you are currently storing the images. Here are a few possibilities:

bootstrap image grid examples

Dynamic bootstrap grid

Using JavaScript

1 Using JavaScript: You can use JavaScript to dynamically add new images to the grid. For example, you can use an event listener to listen for a button click and then use JavaScript to create new image elements and add them to the grid.

function addImage(url) {
        var img = document.createElement("img");
        img.src = url;
        img.classList.add("img-fluid");
        var col = document.createElement("div");
        col.classList.add("col-sm-4");
        col.appendChild(img);
        document.querySelector(".row").appendChild(col);
    }

---

Using ajax

2 Using ajax: You can use ajax to fetch the new images and append them to the grid.

$.ajax({
    type: "GET",
    url: "path/to/image",
    success: function(data) {
        var img = document.createElement("img");
        img.src = data.img_url;
        img.classList.add("img-fluid");
        var col = document.createElement("div");
        col.classList.add("col-sm-4");
        col.appendChild(img);
        document.querySelector(".row").appendChild(col);
    }
});

---

Server-side rendering

3 Server-side rendering: If you are using a server-side language like Python, you can fetch the new images from the server and add them to the grid using a template engine like Jinja2.

@app.route('/add_image', methods=['POST'])
def add_image():
    image_url = request.form['image_url']
    image_lst.append(image_url)
    return render_template('show_image.html', image_lst=image_lst)

---

Reloading the page

4 Reloading the page: You can submit a form that sends the image data to the server and have the server store the image. Then you can refresh the page, and the image will be added to the grid.

---

You can choose the method that best suits your use case, depending on the amount of images, the frequency of adding new images and the complexity of your application.