title: DataTables pagination style doesn't styled as bootstrap theme
body: <p>I try to use DataTables on my Web. I'm using bootstrap version 3.3.6 from here: <a href="http://getbootstrap.com/" rel="noreferrer">http://getbootstrap.com/</a></p>
  
  <p>I'm using DataTables example from here: <a href="https://datatables.net/examples/styling/bootstrap.html" rel="noreferrer">https://datatables.net/examples/styling/bootstrap.html</a></p>
  
  <p>This is what I expected:</p>
  
  <p><a href="https://i.stack.imgur.com/LX8WQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LX8WQ.png" alt="expected"></a></p>
  
  <p>But this is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/6B8tV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6B8tV.png" alt="what I get"></a></p>
  
  <p>Here is my code:</p>
  
  <pre><code><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
   &lt;!-- Bootstrap --&gt;
   &lt;!-- Bootstrap core CSS --&gt;
   &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
   &lt;!-- Bootstrap theme --&gt;
   &lt;link href="css/bootstrap-theme.css" rel="stylesheet"&gt;
   &lt;!-- Datatable css --&gt;
   &lt;link href="css/dataTables.bootstrap.min.css" rel="stylesheet"&gt;
   &lt;link href="css/jquery.dataTables.min.css" rel="stylesheet"&gt;
   &lt;!-- Custom styles for this template --&gt;
   &lt;link href="theme.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;!-- some other stuff and html code here --&gt;
  
   &lt;!-- and, at the end of page, I have: --&gt;
   &lt;script&gt;window.jQuery || document.write('&lt;script src="../../assets/js/vendor/jquery.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
   &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/docs.min.js"&gt;&lt;/script&gt; 
   &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
   &lt;script src="js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
   &lt;script&gt;
    $(document).ready(function() {
     $('#example').DataTable();
        } );
   &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  
  </code></pre>
  
  <p>Did I missed something? I've tried to compare my code and example code from example here: <a href="https://datatables.net/examples/styling/bootstrap.html" rel="noreferrer">https://datatables.net/examples/styling/bootstrap.html</a></p>
  
  <p>but still no found any different</p>
  
  <p>edit: I add theme.css to my page, it only like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding-top: 70px;
    padding-bottom: 30px;
  }
  
  .theme-dropdown .dropdown-menu {
    position: static;
    display: block;
    margin-bottom: 20px;
  }
  
  .theme-showcase &gt; p &gt; .btn {
    margin: 5px 0;
  }
  
  .theme-showcase .navbar .container {
    width: auto;
  }</code></pre>
  </div>
  </div>
  </p>