Datatable styling so bootstrap button appears on same row as other elements

SOLUTION #1

This is the most confusing part with using Bootstrap style for jQuery DataTables and it's undocumented so far. Bootstrap extension overrides default dom which can be confirmed by viewing its source code.

You have to use specially crafted dom option similar to shown below:

dom: 
    "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-5'i><'col-sm-7'p>>",

You can be as creative as you want by using Bootstrap row and col-* classes in the dom option.

See this jsFiddle for code and demonstration.

SOLUTION #2

You can also use direct insertion method as shown in this example because default dom option used for Bootstrap styling is quite complex.

var table = $('#example').DataTable({
   initComplete: function(){
      var api = this.api();

      new $.fn.dataTable.Buttons(api, {
         buttons: [
            {
               text: 'Pull my products',
               action: function ( e, dt, node, config ) {
                  alert( 'Button activated' );
               }
            }
         ]
      });

      api.buttons().container().appendTo( '#' + api.table().container().id + ' .col-sm-6:eq(0)' );  
   }
});

Note that code differs from the example referenced above because there is an issue with DataTables 1.10.9 preventing direct insertion of buttons if there is no B character in dom option or dom option is not specified.

See this jsFiddle for code and demonstration.

In my case I just added these styles:

.dataTables_length,.dataTables_filter {
    margin-left: 10px;
    float: right;
}