Jquery Ui Sortable bug with bootstrap grid -

this pretty has me beat. turning placeholder option on in jquery ui causes appear in top left corner , if @ animation once element has been sorted goes top left corner before going in place dropped.

$(".widget-row").sortable({         connectwith:".widget-row",         helper:"clone",         revert:true,         placeholder: "ui-state-highlight",         opacity:0.5,          grid: [ 20, 10 ] ,         start: function(e, ui ){             ui.placeholder.height(ui.helper.outerheight());             ui.placeholder.width(ui.helper.outerwidth());             //console.log(ui.helper.attr('id'));         },         update: function(event, ui){             arrange_doc();         }     }); 

sample on js fiddle

any appreciated.

after ton of research have found it, giving placeholder bootstrap class such span1-2-3-4... makes behave again.

answer containing solution.