Append custom control to dom using dataTables with bootstrap

I have added a select(dropdown) for datatables search box for searching per column and trying to add that select to searchbox as below->

var table = $('#example').DataTable({
 dom: '<l<"toolbar">f>rtip',
            language: {
                search: "_INPUT_", //To remove Search Label
                searchPlaceholder: "Search..."
            }
})  
$("div.toolbar").html(select);

CSS

.toolbar {
        float: right;
    }

It actually worked on fiddle -> https://jsfiddle.net/32v2qpj1/5/

Surprisingly length and filter position has been changing when I implemented the same on my .aspx page like below image. Bootstrap row and col grids are missing whenever I use dom. It adding as a 2 seperate rows for length and search and as same at footer. I tried examples from https://datatables.net/reference/option/dom to check if my code is wrong. It's just re-positioning when use DOM!

I have no idea why it is re-positioning when only added dom. I was wondering is there any other way to add select control to the search box?