title: Image Picker Html
body: <p>I tried to create a website to show 6 images and a user can mark every image
  he likes. Just like when you register on Netflix or the Captcha from Google.</p>
  
  <p>I am very new to Web development and so I don't know what is the best way to do this. I created the website using Bootstrap but now I have trouble to implement the code to make the images checkable.</p>
  
  <p>I found a very interesting plugin but it didn't work. But I am not sure if I implemented the plugin right. Link: <a href="http://jcuenod.github.io/imgCheckbox/" rel="nofollow noreferrer">http://jcuenod.github.io/imgCheckbox/</a></p>
  
  <p>If I copy the code the images show up on the page but I cannot click them.</p>
  
  <p>The code below is not my full website it's only a small page to test this.</p>
  
  <pre><code>&lt;head&gt;
    &lt;script type="text/javascript" src='imgCheckbox/jquery.imgcheckbox.js'&gt; 
  </code></pre>
  
  <p>
        </p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- Main --&gt;
  &lt;main role="main" class="container-fluid"&gt;
  
    &lt;div class="container-fluid" style="margin-top:50px;"&gt;
      &lt;section id="basicusage" class="wrapper special"&gt;
        &lt;header class="major"&gt;
          &lt;h2&gt;Basic Usage&lt;/h2&gt;
        &lt;/header&gt;
        &lt;form class="exampleone"&gt;
          &lt;p&gt;
            &lt;img src="images/1.jpg" class="img-fluid" alt=""&gt;
            &lt;span class="spacer"&gt;&lt;/span&gt;
            &lt;img src="images/2.jpg" class="img-fluid" alt=""&gt;
            &lt;span class="spacer"&gt;&lt;/span&gt;
            &lt;img src="images/3.jpg" class="img-fluid" alt=""&gt;
          &lt;/p&gt;
          &lt;input type="submit" /&gt;
        &lt;/form&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  
  &lt;/main&gt;
  
  &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>