Lava Example - 61 | Rock Community

Lava Example - 46

Prompt

Your template has been provided with an {{ Items }} merge field. Each item has a "Title", an "ImageUrl", and a "Description" property.

Create (3) cards to display these items side-by-side instead (don't forget your row div)!

Initial Code

{% for item in Items %}
    <div>
        <img src="{{ item.ImageUrl }}" />
        <strong>{{ item.Title }}</strong> 
        <p>{{ item.Description }}</p>
    </div>
{% endfor %}

Solution Lava

<div class="row">
    {% for item in Items %}
        <div class="col-md-4">
            <div class="card">
                
                <img src="{{ item.ImageUrl }}" class="card-img-top" />
                
                <div class="card-body">
                    <h4 class="card-title">{{ item.Title }}</h4>
                    <p class="card-text">{{ item.Description }}</p>
                </div>
                
            </div>
        </div>
    {% endfor %}
</div>