Jquery Ui Sortable bug with bootstrap grid

Question

This pretty much has me beat. Turning the placeholder option on in jquery ui causes it to only appear in the top left corner and if you look at the animation once an element has been sorted it goes up to the top left corner before going in the place it was 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 is on Js Fiddle

Any help is greatly appreciated.

Answer 1

After a ton of research i have found it, giving the placeholder a bootstrap class such as span1-2-3-4... makes it behave normally again.

Answer containing the solution.