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 -2 and -1 on .select2-search__field and select2-selection__choice. This is fine is sizes are pixels, but Bootstrap 4 uses rem and em. We already take border into account in the height calculation so we just need to override the height in those cases:
NOTE:
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
EDIT:
Since writing this article I’ve created Select2 themes for both Bootstrap 4 and Bootstrap 5.
- Bootstrap 4 theme – https://github.com/angel-vladov/select2-theme-bootstrap4
- Bootstrap 5 theme – https://github.com/angel-vladov/select2-theme-bootstrap5
Leave a Reply