How to display mulitple Dropzone.js preview records in one row using a preview template

I am using dropzone.js to display images for my application. The app uses Laravel, Vue, and Bootstrap. There can be as many as 40+ images for one record in my DB so displaying one preview per row isn't very appealing. Ideally, I would display 4 per row but I can't figure out how to do that. It appears to me (because every example I see is this way) that each file record becomes its own row.

My HTML looks like this:

<div class="dropzone" id="dropzone_container"></div>

<div class="dropzone-previews"></div>

<div id="preview-template" class="preview-template">
    <div class="dz-preview dz-file-preview">

        <div class="dz-details">
            <img data-dz-thumbnail/>
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>

        </div>
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>

Javascript:

let dropzone = new Dropzone("#dropzone_container", {
        url: "#",
        method: 'put',
        addRemoveLinks: true,
        previewsContainer: ".dropzone-previews",
        previewTemplate: '#preview-template',
        autoQueue: false,
        createImageThumbnails: true,
        thumbnailWidth: 360,
        thumbnailHeight: 360,
        autoProcessQueue: false,
        autoProcess: false,
        acceptedFiles: ".gif,.jpeg,.jpg,.png",
        maxThumbnailFilesize: 1000,
});

Solution

You can use bootstrap's grid system. Just add row and row-cols-[n] on dropzone-previews.

Note: Tested using dropzone@5 and bootstrap@5.0.2, and I modified previewTemplate property.

<div class="dropzone" id="dropzone_container"></div>
<div class="dropzone-previews row row-cols-4"></div>
<div id="preview-template" class="preview-template">
    <div class="dz-preview dz-file-preview">
        <div class="dz-details">
            <img data-dz-thumbnail />
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>
        </div>
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>

let dropzone = new Dropzone("#dropzone_container", {
    url: "#",
    method: 'put',
    addRemoveLinks: true,
    previewsContainer: ".dropzone-previews",
    previewTemplate: document.getElementById('preview-template').innerHTML,
    autoQueue: false,
    createImageThumbnails: true,
    thumbnailWidth: 360,
    thumbnailHeight: 360,
    autoProcessQueue: false,
    autoProcess: false,
    acceptedFiles: ".gif,.jpeg,.jpg,.png",
    maxThumbnailFilesize: 1000,
});