Vanilla js bootstrap layout issue

Question

I am trying to fetch image data from Pixabay API where I want to show editor's choice images.

The problem is regarding the layout. I am trying to show 3 or 4 images in each row but the layout is breaking down. I don't want to compromise with the responsiveness.

Ideally, 3 columns should display in each row. The problem is after first 3 column, in the second row, columns are not align properly. In fact, is not even adding dynamically in each row. I tried to add in html and in template literal as well. But nothing worked.

let editorChoice = document.querySelector('.editorchoice')
async function getImg() {
  let imgData = await fetch('https://pixabay.com/api/?key=12334&editors_choice')
  let imgRaw = await imgData.json()
  console.log(imgRaw)
  let itemData = imgRaw.hits
  itemData.map((item) => {
    let imgId = item.id
    let imgType = item.type
    let imgPreview = item.previewURL
    let imgTag = item.tags
    editorChoice.innerHTML += `<div class="col-lg-4 card">
    <img src="${imgPreview}" class="img-responsive center-block" alt="${imgTag}"
    </div>
    <p class="text-center">${imgTag}</p>`
  })
}
getImg()

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="container-fluid bg-3 text-center">
  <h3>Editor's Choice</h3><br>
  <div class="editorchoice"></div>
</div>

Answer 1

First, you're currently using Tailwind CSS, not Bootstrap. Make sure you use the latest version of Tailwind by replacing the <link /> with:

<script src="https://cdn.tailwindcss.com"></script>

Next, to have them displayed in a grid, use the .grid and .grid-cols classes built into Tailwind:

<div id="editorChoice" class="grid grid-cols-4">
  <!-- Images go in here -->
</div>

To add the images themselves, rather than using .innerHTML, you should ideally use document.createElement() and document.appendChild():

async function fetchImage() {
  let img = await fetch(
    "https://pixabay.com/api/?key=12334&editors_choice",
  ).json().hits;

  img.map((item) => {
    let container = document.createElement("div");
  
    let element = document.createElement("img");
    element.src = item.previewURL;
    element.alt = item.tags;

    container.appendChild(element);

    let label = document.createElement("p");
    let labelText = document.createTextNode(item.tags);
    label.appendChild(labelText);    
    
    container.appendChild(label);
    
    document.getElementById("editorChoice").appendChild(container)
  });
}

fetchImage();

Here, we're looping over the returned results and creating various elements to have them all show up in a 4-column grid.

Here's a runnable code snippet using Lorem Picsum instead of Pixabay:

async function fetchImage() {
  let img = [
    {
      previewURL: `https://picsum.photos/1920/1080?random=1`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=2`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=3`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=4`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=5`,
      tags: "A Picture",
    },
    {
      previewURL: `https://picsum.photos/1920/1080?random=6`,
      tags: "A Picture",
    },
  ];

  img.map((item) => {
    let container = document.createElement("div");

    let element = document.createElement("img");
    element.src = item.previewURL;
    element.alt = item.tags;

    container.appendChild(element);

    let label = document.createElement("p");
    let labelText = document.createTextNode(item.tags);
    label.appendChild(labelText);

    container.appendChild(label);

    document.getElementById("editorChoice").appendChild(container);
  });
}

fetchImage();

<script src="https://cdn.tailwindcss.com"></script>
<h3>Editor's Choice</h3>
<div id="editorChoice" class="grid grid-cols-4">
  <!-- Images go in here -->
</div>