Irregular bootstrap column wrapping
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 :
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
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
)
In my case I wanted to show 3 items per row on large screens, 2 on medium screens, and 1 on smaller screens.
You may also uncomment the background colors to verify when the effect is triggering.
http://www.bootply.com/QOor73wFAY#
/* fixes for columns wrapping in odd ways due to variable height *//* when showing 2 items per row, clear #1, 3, 5 */@media (min-width: $screen-sm-min){ .cell-box:nth-child(2n+1){ clear: both; /* background-color: rgba(0, 0, 255, .5); /* blue */ }}/* when showing 3 items per row, clear #1, 4, 7 */@media (min-width: $screen-md-min){ .cell-box:nth-child(2n+1){ clear: none; } .cell-box:nth-child(3n+1){ clear: both; /* background-color: rgba(0, 255, 0, .5); /* green */ }}
Sometimes, I run into this issue as well. I recommend trying to overwrite any padding or margin that you do NOT need. Try changing the margin to 0 first. Then remove some of the padding. That has helped in some of my cases.