Twitter have changed variables names in Bootstrap 4 so the original SASS files that come with Select 2 bootstrap theme won’t work. Until there is a BS 4 compatible theme for Select 2 you can use the variables overrides below for your project.
In addition include those styles overrides after the select2 theme files. Select2 bootstrap theme uses
select2-selection__choice. This is fine is sizes are pixels, but Bootstrap 4 uses
em. We already take border into account in the height calculation so we just need to override the height in those cases:
Import order is important. Theme variables are marked with
!default. Declare those variables before the select2 theme import or your SASS compilation will fail.
Here’s an example how your imports should look:
@import "node_modules/bootstrap/scss/bootstrap"; @import "node_modules/font-awesome/scss/font-awesome"; @import "node_modules/select2/src/scss/core"; @import "select2-bootstrap4.vars"; // Here are variables from the GIST above @import "node_modules/select2-bootstrap-theme/src/select2-bootstrap"; @import "select2-bootstrap4.after"; // Override theme styles