Irregular bootstrap column wrapping

Question

Running Rails 4.1.4 with the latest releases of haml, haml-rails, sass, and bootstrap-sass. For a user display, my HAML is as such:

.tutors-listing
    .row
         


        

Answer 1

This is caused by skills with 2 lines of text or more. It's a well-known bug when using float property. Here is a little picture to understand :

[Bootply] The issue

Option #1 : Force the height

Your first option is to force elements to have the same height :

.tutor {
    height: 500px;
}

• [Pro] Simple and work everywhere
• [Con] Use a magic number
• [Con] Limit the number of lines in skills
• [Con] Useless whitespaces on modile version

[Bootply] Force height

Option #2 : Use a clearfix

Your second option is to use a clearfix, and force the 5th element to be on a new line (same for the 9th, the 13th...) :

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}

• [Pro] Doesn't limit the number of lines in skills
• [Pro] No useless whitespaces
• [Pro] No magic number
• [Con] One CSS rule per size (xs/sm/md/lg)
• [Con] The rule depends of your grid (.col-xx-3)

[Bootply] Clearfix