Essentially, I have a series of screenshots representing a function in an app and I want to convert each screenshot into a list item. Although I have managed to make them display inline, they only occupy part of the row and the layout stops after three images. Is there a way to extend them to use the entire row?
Code Snippet :
<div class="row">
<h3 id="{{anchor}}" class="headline my-4">{{{title}}}</h3>
<ul class="d-block">
{{#each images}}
<li class="col-6 col-sm-4 col-md-3 mb-4 list-inline-item">
<div class="list-inline-item">
<a href="{{{filename}}}.png" data-lightbox="{{{../anchor}}}">
<img loading="lazy" data-src="{{{filename}}}.png" class="img-fluid img-shadow lazy" alt="{{{alt}}}" title="{{{alt}}}">
</a>
</div>
</li>
{{/each}}
</ul>
And here's an example below!