Select 2 with Bootstrap 4

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

7 thoughts on “Select 2 with Bootstrap 4

    1. Thanks Alicia.
      I’ve answered in the issue on github and also updated the blog post. Fixing all the issues with Bootstrap 4 will require more work. This was something i did real quick for one of the projects I worked on. I’ll try to create something more complete when I have free time later during the week.

Leave a Reply