title: Bootstrap Multiple Select Dropdown
body: <p>I am using a bootstrap-select, a JQuery multi-select plugin based on Bootstrap to create a multiple select dropdown.</p>
  <p>I want to add some style to the dropdown, like changing the tick marks to checkboxes as in the image below</p>
  <p><a href="https://i.stack.imgur.com/Pe1nZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pe1nZ.png" alt="Multiple select with Round checkboxes" /></a></p>
  <p>I don't know how to go about it. Anyone has an idea? I am open to another plugin if it's easier to customize.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css&quot;&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;select class=&quot;selectpicker&quot; multiple data-selected-text-format=&quot;count &gt; 3&quot; title='Choose one...' data-width=150px&gt;
    &lt;option&gt;Mustard&lt;/option&gt;
    &lt;option&gt;Ketchup&lt;/option&gt;
    &lt;option&gt;Barbecue&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
    $('select').selectpicker();
  });
  &lt;/script&gt;
  </code></pre>