Bootstrap grid layout issue when populating with items - html

Question

I'm new to MVC5 and especially to using Bootstrap. I'm trying to create a website in which the first page should feature a grid with student images. Right now it looks like this. I want to have 5 images per row, but I haven't manage to figure out how(it was either 4, or 6).
Also when there is no space between the rows and the images stuck together.
I am populating the grid with items from my Student Model.
<div class="col-md-10">
<div class="row">
#foreach (var item in Model.Students)
{
<div class="col-md-2">
<a href="#Url.Action("Edit", "Students", new {studentId = item.StudentId})">
<img src="../../#item.ProfileImagePath" alt="Profile Image" />
</a>
</div>
}
</div>
</div>
I didn't fully understand how does the bootstrap grid work, especially when I'm populating it with dynamic data. The website looks like this now
http://imgur.com/5fLRZeM

Answer 1

You have
<div class="row">
#foreach (var item in Model.Students)
{
<div class="col-md-2">
...
</div>
}
</div>
Which generates one long <row>. But there is no auto-wrapping, you'll have to break this up into rows yourself.
Assuming that Students is a List<>
// roughly, untested
#for(int r = 0; r < Model.Students.Count; r += 5)
{
<div class="row">
#for (int s = r; s < r+5; s += 1)
{
<div class="col-md-2">
// do stuff with Model.Students[s]
</div>
}
</div>
}