title: jQuery DataTables with Bootstrap Styling and responsive extension does't work
body: <p>In my html page i replaced the example of this <a href="http://datatables.net/extensions/responsive/examples/styling/bootstrap.html" rel="nofollow">link</a>. In the head tag i have this:</p>
  
  <pre><code>&lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="http:////cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>for the css and this:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http:////cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;script src="http:////cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>for the javascript.</p>
  
  <p>The table is this:</p>
  
  <pre><code>&lt;table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;First name&lt;/th&gt;
                      &lt;th&gt;Last name&lt;/th&gt;
                      &lt;th&gt;Position&lt;/th&gt;
                      &lt;th&gt;Office&lt;/th&gt;
                      &lt;th&gt;Age&lt;/th&gt;
                      &lt;th&gt;Start date&lt;/th&gt;
                      &lt;th&gt;Salary&lt;/th&gt;
                      &lt;th&gt;Extn.&lt;/th&gt;
                      &lt;th&gt;E-mail&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Quinn&lt;/td&gt;
                      &lt;td&gt;Flynn&lt;/td&gt;
                      &lt;td&gt;Support Lead&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;22&lt;/td&gt;
                      &lt;td&gt;2013/03/03&lt;/td&gt;
                      &lt;td&gt;$342,000&lt;/td&gt;
                      &lt;td&gt;9497&lt;/td&gt;
                      &lt;td&gt;q.flynn@datatables.net&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Quinn&lt;/td&gt;
                      &lt;td&gt;Flynn&lt;/td&gt;
                      &lt;td&gt;Support Lead&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;22&lt;/td&gt;
                      &lt;td&gt;2013/03/03&lt;/td&gt;
                      &lt;td&gt;$342,000&lt;/td&gt;
                      &lt;td&gt;9497&lt;/td&gt;
                      &lt;td&gt;q.flynn@datatables.net&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Quinn&lt;/td&gt;
                      &lt;td&gt;Flynn&lt;/td&gt;
                      &lt;td&gt;Support Lead&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;22&lt;/td&gt;
                      &lt;td&gt;2013/03/03&lt;/td&gt;
                      &lt;td&gt;$342,000&lt;/td&gt;
                      &lt;td&gt;9497&lt;/td&gt;
                      &lt;td&gt;q.flynn@datatables.net&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>I call datatable at the end of body with:</p>
  
  <pre><code>&lt;script&gt;
          $(document).ready(function() {
              $('#example').dataTable({
                  responsive: true
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>My code seems the same of the example on the DataTable site. It works and my doesn't work. Why? </p>