select2 con bootstrap4

app/assets/javascripts/application.js

@@ -21,6 +21,6 @@
 //= require bootstrap/dropdown
 //= require bootstrap-markdown/js/bootstrap-markdown
 //= require markdown-it/dist/markdown-it
-//= require select2/dist/js/select2
-//= require table-dragger/dist/table-dragger.js
+//= require select2/dist/js/select2.full.min
+//= require table-dragger/dist/table-dragger.min
 //= require_tree .

app/assets/javascripts/select2.js

@@ -3,6 +3,8 @@ $(document).on('turbolinks:load', function() {
     tags: true,
     tokenSeparators: [','],
     allowClear: true,
-    placeholder: ''
+    placeholder: '',
+    theme: 'bootstrap',
+    containerCssClass: ':all:'
   });
 });

app/assets/stylesheets/application.scss

@@ -2,7 +2,8 @@
 @import "bootstrap-markdown/css/bootstrap-markdown.min";
 @import "font-awesome";
 @import "select2/dist/css/select2";
-@import "dragula-with-animation/dist/dragula.css";
+@import "select2-bootstrap-theme/dist/select2-bootstrap.min";
+@import "dragula-with-animation/dist/dragula";
 
 $footer-height: 60px;
 

package.json

@@ -10,6 +10,7 @@
     "marked": "^0.3.12",
     "popper.js": "^1.12.9",
     "select2": "^4.0.6-rc.1",
+    "select2-bootstrap-theme": "https://github.com/angel-vladov/select2-bootstrap-theme",
     "table-dragger": "^1.0.2"
   }
 }

yarn.lock

@@ -133,6 +133,10 @@ rx@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
 
+"select2-bootstrap-theme@https://github.com/angel-vladov/select2-bootstrap-theme":
+  version "0.1.0-beta.10"
+  resolved "https://github.com/angel-vladov/select2-bootstrap-theme#4fb604838e79150161fc636dbeb3b3022c034cda"
+
 select2@^4.0.6-rc.1:
   version "4.0.6-rc.1"
   resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.6-rc.1.tgz#aa6c3038a7f0f2e91ffade38f0a21c15e1813276"