using Bootstrap for UI and call a api for images to diplay in 3X3 [Col X Row] using javascript Async-Await. But getting 3 image in colums and not 3 X 3 Grid layout
It can be using Grid Columns or using Flex In bootstrap 4
I am use Prototyping using Dog Api for Demo purpose.
On click of Button it will display top 15 images on Grid layout in bootstrap
Not getting correct result image1 below is output I got.
Image1 
But it should display as Image2 with different Image in grid
Image2
const API_URL = 'https://dog.ceo/api/breeds/image/random/20';
const randomImgDogs = document.querySelector('.random-dogs');
const loadingImg = document.querySelector('.loading');
const getButton = document.querySelector('.getRandomDog');
loadingImg.style.display = 'none';
async function getRandomDogs() {
randomImgDogs.innerHTML = '';
loadingImg.style.display = '';
const response = await fetch(API_URL);
const json = await response.json();
console.log(json.message);
json.message.forEach(dogImage => {
randomImgDogs.innerHTML += `<div class="container-fluid"><div class="d-flex flex-row flex-wrap justify-content-center"><div class="d-flex flex-column"><img src="${dogImage}" class="img-fluid"></div></div></div>`;
});
loadingImg.style.display = 'none';
}
getButton.addEventListener('click', getRandomDogs);img {
margin: 5px;
}
.flex-column {
max-width: 260px;
}
a svg {
font-size: 30px;
text-align: center;
align-items: center;
justify-content: center;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"><div class="jumbotron text-center"><h1 class="display-4 font-weight-bold text-center">Random Dogs</h1><p class="lead">Click on Get to see some random dogs Images!</p><a class="btn btn-primary btn-lg getRandomDog " href="#" role="button">Get Random Dogs Images<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor"
xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd"
d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"
clip-rule="evenodd" /></svg></a></div><!-- --><!-- loading --><div class="loading text-center"><div class="spinner-border text-dark" style="width: 3rem; height: 3rem;" role="status"><span class="sr-only">Loading...</span></div></div><!-- loading ends --><!-- main start --><div class="random-dogs"></div><!-- main ends -->