Fix aligning of option group caret and clean up css

dist/css/bootstrap-multiselect.css

@@ -2,7 +2,7 @@
  * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
  *
  * Apache License, Version 2.0:
- * Copyright (c) 2012 - 2018 David Stutz
+ * Copyright (c) 2012 - 2020 David Stutz
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a
@@ -15,7 +15,7 @@
  * under the License.
  *
  * BSD 3-Clause License:
- * Copyright (c) 2012 - 2018 David Stutz
+ * Copyright (c) 2012 - 2020 David Stutz
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -69,41 +69,19 @@ span.multiselect-native-select select {
   width: 93%;
 }
 .multiselect-container > .multiselect-option.dropdown-item,
-.multiselect-container > .multiselect-option.dropdown-toggle {
+.multiselect-container .multiselect-group.dropdown-item,
+.multiselect-container > .multiselect-option.dropdown-toggle,
+.multiselect-container .multiselect-group.dropdown-toggle {
   cursor: pointer;
 }
-.multiselect-container > .multiselect-option.dropdown-item-text {
-  text-decoration: none;
-  color: initial;
-}
-.multiselect-container > .multiselect-option.multiselect-group {
-  margin: 0;
-  padding: 3px 15px;
-  height: 100%;
-}
-.multiselect-container > .multiselect-option.multiselect-group-clickable label {
-  cursor: pointer;
-}
-.multiselect-container > .multiselect-option > span {
-  margin: 0;
-  height: 100%;
-  cursor: pointer;
-  font-weight: normal;
+.multiselect-container > .multiselect-option > span,
+.multiselect-container .multiselect-group > span {
   padding: 3px 20px;
 }
-.multiselect-container > .multiselect-option > span.form-check {
-  margin: 0;
-}
-.multiselect-container > .multiselect-option > span > input[type="checkbox"] {
-  margin-bottom: 5px;
-}
-.multiselect-container > .multiselect-option > span > .form-check-label {
+.multiselect-container > .multiselect-option > span > .form-check-label,
+.multiselect-container .multiselect-group > span > .form-check-label {
   cursor: pointer;
 }
-.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .form-inline .multiselect-container span.form-check {
   padding: 3px 20px 3px 40px;
 }

dist/js/bootstrap-multiselect.js

@@ -997,6 +997,7 @@
             $groupOption.addClass(classes);
 
             if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
+                $groupOption.find('.form-check').addClass('d-inline-block');
                 $groupOption.append('<span class="caret-container dropdown-toggle pl-1"></span>');
             }
 

dist/less/bootstrap-multiselect.less

@@ -3,7 +3,7 @@
  * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
  *
  * Apache License, Version 2.0:
- * Copyright (c) 2012 - 2018 David Stutz
+ * Copyright (c) 2012 - 2020 David Stutz
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a
@@ -16,7 +16,7 @@
  * under the License.
  *
  * BSD 3-Clause License:
- * Copyright (c) 2012 - 2018 David Stutz
+ * Copyright (c) 2012 - 2020 David Stutz
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -75,56 +75,23 @@ span.multiselect-native-select select{
     }
   }
 
-  > .multiselect-option {
+  > .multiselect-option, .multiselect-group {
     &.dropdown-item,
     &.dropdown-toggle {
       cursor: pointer;
     }
 
-    &.dropdown-item-text {
-      text-decoration: none;
-      color: initial;
-    }
-
-    &.multiselect-group {
-      margin: 0;
-      padding: 3px 15px;
-      height: 100%;
-    }
-
-    &.multiselect-group-clickable label {
-      cursor: pointer;
-    }
-
     > span {
-      margin: 0;
-      height: 100%;
-      cursor: pointer;
-      font-weight: normal;
       padding: 3px 20px;
 
-      &.form-check {
-        margin: 0;
-      }
-
-      > input[type="checkbox"] {
-        margin-bottom:5px;
-      }
-
       > .form-check-label {
         cursor: pointer;
       }
     }
   }
 }
 
-.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.form-inline .multiselect-container{
-
+.form-inline .multiselect-container {
   span.form-check {
     padding: 3px 20px 3px 40px;
   }

index.html

@@ -6792,7 +6792,9 @@ <h3>Templates</h3>
 
                     <h3>Fonts</h3>
                     <p>
-                        Bootstrap dropped the Glyphicons icon font therefore the icons in the multiselect where changed to <a href="https://fontawesome.com/">FontAwesome</a>.
+                        Bootstrap dropped the Glyphicons icon font therefore the icons in the multiselect where changed to <a href="https://fontawesome.com/">Font Awesome</a>.
+                        To get the icons working you need to <a href="https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself">download Font Awesome</a> and include the all.css or all.min.css into your project.
+                        If you change the location of the font files you may need to also adapt the paths at the end of all.css and all.min.css.
                     </p>
 
                     <div class="page-header">