title: Implementing Bootstrap 4 DataTables
body: <p>I am attempting to implement a bootstrap 4 datatable, and cannot seem to get it to work. In My head I have the required CSS</p>
  
  <pre><code>    &lt;link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>I then have the following required scripts below:</p>
  
  <pre><code>    &lt;script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I then call the scripts onto my standard formatted HTML table, with the correct ID as follows:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $('#myTable').DataTable();
  } );
  &lt;/script&gt;
  </code></pre>
  
  <p>None of this However works, and the table displays using normal Bootstrap 4 Table, with no search/sorting function. Could anyone explain what I'm doing wrong here?</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT: I tried this unfortunately it seemed to break the CSS for the whole site. All I really want to do is only show the first 10 rows of my bootstrap 4 table, but every time I google it it comes up with results for data tables. Is there any way to show just the first 10 rows of a standard bootstrap 4 table?</strong> </p>