DataTables pagination style doesn't styled as bootstrap theme
<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>