title: boostrap 3 + datatables buttons: misalignment
body: <p>I'm experiencing misalignment when using boostrap 3 and datatables buttons (<a href="https://datatables.net/extensions/buttons/" rel="nofollow noreferrer">https://datatables.net/extensions/buttons/</a>). How to align them propery?
  <a href="https://i.stack.imgur.com/Eyki8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Eyki8.png" alt="enter image description here" /></a></p>
  <p>everything works fine when on <code>div.dt-buttons</code> margin is set <code>margin-top:2px;</code>, don't know why, but it feels wrong is there any &quot;standard way&quot;?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(myApp) {
    myApp.myDataTable = $('.my-table').DataTable({
      fixedHeader: true,
      paging: true,
      buttons: {
        dom: {
          button: {
            className: ''
          }
        },
        buttons: [{
          extend: 'colvis',
          tag: 'button',
          className: 'btn btn-default'
        }]
      }
    });
  
  }(window.myApp = window.myApp || {}));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css" /&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6"&gt;
      &lt;div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite"&gt;Showing 1 to 12 of 24 entries&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-3"&gt;
      &lt;div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate"&gt;
        &lt;ul class="pagination"&gt;
          &lt;li class="paginate_button previous disabled" id="DataTables_Table_0_previous"&gt;
            &lt;a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0"&gt;Previous&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="paginate_button active"&gt;
            &lt;a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0"&gt;1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="paginate_button "&gt;
            &lt;a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0"&gt;2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="paginate_button next" id="DataTables_Table_0_next"&gt;
            &lt;a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0"&gt;Next&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-3"&gt;
      &lt;div class="dt-buttons"&gt;
        &lt;button tabindex="0" aria-controls="DataTables_Table_0" type="button" class="buttons-collection buttons-colvis btn btn-default" aria-haspopup="true" aria-expanded="false"&gt;
                      &lt;span&gt;Column visibility&lt;/span&gt;
                      &lt;span class="dt-down-arrow"&gt;▼&lt;/span&gt;
                  &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>