html - How to wrap multiple uneven height .col- siblings in Bootstrap .row -


i have lot of products , need maximum 6 products each line, let each product col-lg-2 (6*2 = 12 bootstrap cols) , think should break next line automatically (starts on left side), isn't it?

but second line broken , start fourth col instead. please, reason , how can fix it?

see image below maybe simulate better english. in advance.

enter image description here

use .clearfix class before ending row

<div class="row">     <div class="col-lg-2 col-sm-4 col-xs-6"></div>     <div class="col-lg-2 col-sm-4 col-xs-6"></div>     <div class="col-lg-2 col-sm-4 col-xs-6"></div>     <div class="col-lg-2 col-sm-4 col-xs-6"></div>     <div class="col-lg-2 col-sm-4 col-xs-6"></div>     <div class="col-lg-2 col-sm-4 col-xs-6"></div>        <div class="clearfix"></div> //use before end of row </div> 

or if possible use not more 6 container in 1 row take row , add next 6 container


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -