When using a foreach loop to display clients with images, the desired layout is for them to be listed in 6 columns. For instance, if there are 18 clients, they should be displayed in a grid of 6 columns and 3 rows.
Here is the Razor code and HTML:
<div class="row">
@foreach (var patient in Model)
{
<div class="col-xs-2">
<figure style="text-align: center; margin-top: 10%; display: block;">
<img src="~/Content/images/pdficon.png" alt="">
<figcaption>
<div style="margin-top: 5%"><h4>@(patient.Name)</h4></div>
</figcaption>
</figure>
</div>
}
The current output can be seen in this sample image. While the 6 columns are displayed correctly, the alignment in rows seems to be off.