docs: ✏️ tweak demo

Author: ttskch

docs/index.html

@@ -24,7 +24,7 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
   <form>
     <div class="form-group">
       <label>Example of select</label>
-      <select placeholder="Choose one thing" data-allow-clear="1">
+      <select data-placeholder="Choose one thing" data-allow-clear="1">
         <option></option>
         <option>1</option>
         <option>2</option>
@@ -35,7 +35,7 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
     </div>
     <div class="form-group">
       <label>Example of multiple select</label>
-      <select multiple placeholder="Choose anything" data-allow-clear="1">
+      <select multiple data-placeholder="Choose anything" data-allow-clear="1">
         <option>1</option>
         <option>2</option>
         <option>3</option>
@@ -45,12 +45,12 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
     </div>
     <div class="form-group">
       <label>Example of disabled select</label>
-      <select disabled placeholder="Cannot choose">
+      <select disabled data-placeholder="Cannot choose">
       </select>
     </div>
     <div class="form-group">
       <label>Example of select with optgroup</label>
-      <select placeholder="Choose one thing">
+      <select data-placeholder="Choose one thing">
         <option></option>
         <optgroup label="Group A">
           <option>A1</option>
@@ -70,15 +70,15 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
         <div class="input-group-prepend">
           <span class="input-group-text">Prepend</span>
         </div>
-        <select placeholder="Choose on thing">
+        <select data-placeholder="Choose on thing">
           <option></option>
           <option>1</option>
           <option>2</option>
           <option>3</option>
         </select>
       </div>
       <div class="input-group mt-2">
-        <select placeholder="Choose on thing">
+        <select data-placeholder="Choose on thing">
           <option></option>
           <option>1</option>
           <option>2</option>
@@ -92,7 +92,7 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
         <div class="input-group-prepend">
           <span class="input-group-text">Prepend</span>
         </div>
-        <select placeholder="Choose on thing">
+        <select data-placeholder="Choose on thing">
           <option></option>
           <option>1</option>
           <option>2</option>
@@ -105,7 +105,7 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
     </div>
     <div class="form-group">
       <label>Example of validated select</label>
-      <select placeholder="Invalid example" class="form-control is-invalid">
+      <select data-placeholder="Invalid example" class="form-control is-invalid">
         <option></option>
       </select>
       <div class="invalid-feedback">

docs/script.js

@@ -2,8 +2,8 @@ $(function () {
   $('select').each(function () {
     $(this).select2({
       theme: 'bootstrap4',
-      width: 'style',
-      placeholder: $(this).attr('placeholder'),
+      width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
+      placeholder: $(this).data('placeholder'),
       allowClear: Boolean($(this).data('allow-clear')),
     });
   });