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