diff --git a/docs/index.html b/docs/index.html
index afb532b..5d3a0fa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,17 +2,18 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <!-- bootstrap -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha256-T/zFmO5s/0aSwc6ics2KLxlfbewyRz6UNw1s3Ppf5gE=" crossorigin="anonymous">
   <!-- select2 -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" integrity="sha256-zaSoHBhwFdle0scfGEFUCwggPN7F+ip9XRglo8IWb4w=" crossorigin="anonymous">
 
   <!-- select2-bootstrap4-theme -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css"> <!-- for live demo page -->
   <link href="select2-bootstrap4.css" rel="stylesheet"> <!-- for local development env -->
+
+  <title>Select2 Boostrap 4 Theme</title>
 </head>
 
 <body class="pt-5" style="min-height:90vh">
@@ -22,18 +23,40 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
   <hr>
 
   <form>
+    <div class="form-group">
+      <label>Reference select</label>
+      <select class="custom-select">
+        <option value="" hidden="hidden">Choose one thing</option>
+        <option>1</option>
+        <option disabled="disabled">2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+    </div>
+
     <div class="form-group">
       <label>Example of select</label>
       <select data-placeholder="Choose one thing" data-allow-clear="1">
         <option></option>
         <option>1</option>
-        <option>2</option>
+        <option disabled="disabled">2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
       </select>
     </div>
 
+    <div class="form-group">
+      <label>Example of select (pre-selected)</label>
+      <select data-placeholder="Choose one thing" data-allow-clear="1">
+        <option></option>
+        <option selected="selected">1</option>
+        <option>2</option>
+        <option>3</option>
+      </select>
+    </div>
+
     <div class="form-group">
       <label>Example of multiple select</label>
       <select multiple data-placeholder="Choose anything" data-allow-clear="1">
@@ -60,6 +83,41 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
       </select>
     </div>
 
+    <div class="form-group">
+      <label>Example of multiple select (pre-selected)</label>
+      <select multiple data-placeholder="Choose anything" data-allow-clear="1">
+        <option selected="selected">Tommy Yount</option>
+        <option>Hye Panter</option>
+        <option>Vi Yohe</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label>Example of multiple select (many pre-selected)</label>
+      <select multiple data-placeholder="Choose anything" data-allow-clear="1">
+        <option selected="selected">Tommy Yount</option>
+        <option selected="selected">Hye Panter</option>
+        <option selected="selected">Vi Yohe</option>
+        <option selected="selected">Keva Bandy</option>
+        <option selected="selected">Hannelore Corning</option>
+        <option selected="selected">Delorse Whitcher</option>
+        <option selected="selected">Katharyn Marrinan</option>
+        <option selected="selected">Jeannine Tope</option>
+        <option selected="selected">Jamila Braggs</option>
+        <option selected="selected">Eden Cunniff</option>
+        <option selected="selected">Suzy Schoen</option>
+        <option selected="selected">Elza Mccook</option>
+        <option selected="selected">Liana Goris</option>
+        <option selected="selected">Pauletta Schlabach</option>
+        <option selected="selected">Synthia Dupuis</option>
+        <option selected="selected">Scarlett Kestler</option>
+        <option selected="selected">Magdalen Mele</option>
+        <option selected="selected">Susanna Schenk</option>
+        <option>Else Stupka</option>
+        <option selected="selected">Pennie Khang</option>
+      </select>
+    </div>
+
     <div class="form-group">
       <label>Example of disabled select</label>
       <select disabled data-placeholder="Cannot choose" data-allow-clear="1">
@@ -145,11 +203,11 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
 </div>
 
 <!-- bootstrap -->
-<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha256-7dA7lq5P94hkBsWdff7qobYkp9ope/L5LQy2t/ljPLo=" crossorigin="anonymous"></script>
 <!-- select2 -->
-<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" integrity="sha256-9yRP/2EFlblE92vzCA10469Ctd0jT48HnmmMw5rJZrA=" crossorigin="anonymous"></script>
 
 <!-- select2-bootstrap4-theme -->
 <script src="script.js"></script>
diff --git a/docs/script.js b/docs/script.js
index a015033..4e4c230 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,11 +1,22 @@
 $(function () {
-  $('select').each(function () {
+  $('select:not(.custom-select)').each(function () {
     $(this).select2({
       theme: 'bootstrap4',
       width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
       placeholder: $(this).data('placeholder'),
       allowClear: Boolean($(this).data('allow-clear')),
-      closeOnSelect: !$(this).attr('multiple'),
-    });
-  });
-});
+      closeOnSelect: !$(this).attr('multiple')
+    })
+  })
+})
+
+$(document).on('click', '.toggle-validation-js', function (e) {
+  e.preventDefault()
+  $this = $(this)
+
+  $this.closest('.form-group').toggleClass('was-validated')
+
+  $selectElement = $this.closest('.form-group').find('select')
+  $selectElement
+    .toggleClass($this.data('validationClass'))
+})
