Team section - bootstrap alignment problem

Question

I am having a layout problem with my site (done using bootstrap 3) For some reason, aligning images is dirty (see the pictures below) Any idea what is wrong?

What I need:

What I have:

<section id="team"> <div class="row"> <div class="col-xs-2 col-sm-4"> <div class="team-member"> <div class="image" style="background-image:url(../images/male-employee.png)"> </div> <p class="name">John Smith</p> <p class="position">Fondateur <br>Directeur Général</p> </div> </div> <div class="col-xs-2 col-sm-4"> <div class="team-member"> <div class="image" style="background-image:url(../images/female-employee.png)"> </div> <p class="name">John Smith</p> <p class="position">Responsable diétéaires</p> </div> </div> <div class="col-xs-2 col-sm-4"> <div class="team-member"> <div class="image" style="background-image:url(../images/female-employee.png)"> </div> <p class="name">John Smithr</p> <p class="position">Responsable dfsf, maux</p> </div> </div> </div> <div class="row"> <div class="col-xs-2 col-sm-4"> <div class="team-member"> <div class="image" style="background-image:url(../images/male-employee.png)"> </div> <p class="name">John Smith</p> <p class="position">Responsable stome</p> </div> </div> <div class="col-xs-2 col-sm-4"> <div class="team-member"> <div class="image" style="background-image:url(../images/female-employee.png)"> </div> <p class="name">John Smith</p> <p class="position">Responsable Facturation</p> </div> </div> <div class="col-xs-2 col-sm-4"> <div class="team-member"> <div class="image" style="background-image:url(../images/male-employee.png)"> </div> <p class="name">John Smith</p> <p class="position">Technicien</p> </div> </div> </div> <div class="row"> <div class="col-xs-2 col-sm-4 col-md-offset-2"> <div class="team-member"> <div class="image" style="background-image:url(../images/female-employee.png)"> </div> <p class="name">John Smith</p> <p class="position">Accueil Clients et Secrétariat</p> </div> </div> <div class="col-xs-2 col-sm-4"> <div class="team-member"> <div class="image" style="background-image:url(../images/female-employee.png)"> </div> <p class="name">John Smith</p> <p class="position">Responsable administrative et assistante de Direction</p> </div> </div> </div> </section> 

Answer 1

After every 3rd div, you can add this line to fix the height problem:

<div class="clearfix hidden-xs"></div>

Explanation:

The problem was having divs with different heights. Since all floating col-* classes in the bootstrap are floating, some clearfixing is required in such cases to eliminate misalignment. In this particular case, clearfix should not be applied to additional small screens, because in this case there should be 6 columns instead of 3 columns instead of a column, so I used the hidden-xs class.

Answer 2

You need to add more rows to your divs. Currently, the code does not recognize your columns in the code correctly, because it has nothing to put them in. I would edit your code for you, but I'm on my phone.

Try putting row before the first member and the end of the line after the last member of the line, etc. Hope it helps.