Group list in 3 columns in Bootsrap

I have a MongoDB database and I want to import with forEach 3 arrays. This is a recipe and I want to looks like first column the quantity next to a new column the unit and next to the ingredients, each one is imported from a database Array list.

Here is my code:

<div class="row pt-4">
    <div class="col-12">
        <h4>Ingredients</h4>
        <ul class="list-group">
        <% recipe.quantity.forEach(function(quantity, index){ %>
            <li class="list-group-item"><%= quantity %></li>
        <% }) %>

        <% recipe.unit.forEach(function(unit, index){ %>
            <li class="list-group-item"><%= unit %></li>
        <% }) %>

        <% recipe.ingredients.forEach(function(ingredients, index){ %>
            <li class="list-group-item"><%= ingredients %></li>
        <% }) %>
        </ul>
    </div>
</div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try for example:

1. Wrap row in a container. It’s important because row has negative margins.
2. Divide output into 3 lists – by one list per a column.
3. Show headers before their lists.
4. Show all lists under each other on mobile: use col-md class or another one.

<div class="container">
    <div class="row pt-4">
        <div class="col-md">
            <h4>Quantity</h4>
            <ul class="list-group">
                <% recipe.quantity.forEach(function(quantity, index){ %>
                <li class="list-group-item"><%= quantity %></li>
                <% }) %>
            </ul>
        </div>
        <div class="col-md">
            <h4>Unit</h4>
            <ul class="list-group">
                <% recipe.unit.forEach(function(unit, index){ %>
                <li class="list-group-item"><%= unit %></li>
                <% }) %>
            </ul>
        </div>
        <div class="col-md">
            <h4>Ingredients</h4>
            <ul class="list-group">
                <% recipe.ingredients.forEach(function(ingredients, index){ %>
                <li class="list-group-item"><%= ingredients %></li>
                <% }) %>
            </ul>
        </div>
    </div>
</div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0