ReferenceError: $ is not defined or Uncaught ReferenceError: $ is not defined : <p>I am trying to call a bootstrap model in my page. but it throws an error in console output as <strong>ReferenceError: $ is not defined</strong>. Code for the reference as below :-</p>

<pre><code>&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;        
    &lt;link href="&lt;?php echo base_url(); ?&gt;assets/css/style.css" rel="stylesheet" type="text/css"/&gt;
    &lt;link href="&lt;?php echo base_url(); ?&gt;assets/css/bootstrap.css" rel="stylesheet" type="text/css"/&gt;  
&lt;/head&gt;
&lt;body&gt;
&lt;div class="text-center"&gt;
    &lt;button class="btn btn-danger" id="delete" &gt; Delete ID&lt;/button&gt;
&lt;/div&gt;

&lt;div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
            Confirm Delete
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;Are you sure you want to Delete  contact list ?&lt;/div&gt;  
        &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
            &lt;a  id="sureDelete"&gt;&lt;button  class="btn btn-danger success"&gt;Delete&lt;/button&gt;&lt;/a&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

    &lt;script type="text/javascript"&gt;
        $(document).on('click', '#delete', function () {
        $('#confirm-delete').modal('show');});
    &lt;/script&gt;
    &lt;script src="&lt;?php echo base_url(); ?&gt;assets/js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="&lt;?php echo base_url(); ?&gt;assets/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
