html - Bootstrap grid layout issue when populating with items -

i'm new mvc5 , using bootstrap. i'm trying create website in first page should feature grid student images. right looks this. want have 5 images per row, haven't manage figure out how(it either 4, or 6). when there no space between rows , images stuck together.

i populating grid items 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 understand how bootstrap grid work, when i'm populating dynamic data. website looks http://imgur.com/5flrzem

you have

 <div class="row">        @foreach (var item in model.students)        {              <div class="col-md-2">              ...              </div>        }  </div> 

which generates 1 long <row>. there no auto-wrapping, you'll have break rows yourself.

assuming students 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">        // stuff model.students[s]      </div>   }   </div> }