title: How to position DataTables TableTools controls when using Twitter Bootstrap
body: <p>How can I change the position of DataTables controls  when using Twitter Bootstrap theme?</p>
  
  <p>I am using also the following plugins:</p>
  
  <ul>
  <li>ColReorder</li>
  <li>TableTools</li>
  </ul>
  
  <p><strong>sDom</strong></p>
  
  <pre><code>sDom: 'T&lt;"clear"&gt;lRfrtip',
  </code></pre>
  
  <p><strong>Table:</strong></p>
  
  <pre><code>jQuery(document).ready(function() {
      jQuery('#table').DataTable( {
          sDom: 'T&lt;"clear"&gt;lRfrtip',
          sScrollY: "200px",
          sScrollX: "100%",
          oTableTools: {
              "sSwfPath" :"https://cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf",
              "aButtons": [ "copy","csv","xls", "print" ]
          }
      } );
  });
  </code></pre>
  
  <p>Working example:</p>
  
  <p><a href="https://jsfiddle.net/vdpLm1ow/" rel="nofollow">https://jsfiddle.net/vdpLm1ow/</a></p>
  
  <p><strong>PROBLEM</strong>
  I am trying to achieve the following:</p>
  
  <pre><code>|Show |25|entries     |COPY|CSV|XLS|PRINT|    Search|_______|             
  -------------------------------------------------------------
  |Header 1 |Header 2 |Header 3 |Header 4 |Header 5 |Header 6 |
  -------------------------------------------------------------
  |         |         |         |         |         |         |
  -------------------------------------------------------------
  |         |         |         |         |         |         |
  -------------------------------------------------------------
  Showing 1 to 1 of 1 entries                  |Prev | 1 |Next|
  </code></pre>