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
Angel, thanks so much for this, it was a huge help! However, there are a couple of problems with it that are mentioned here: https://github.com/select2/select2-bootstrap-theme/issues/60.
Maybe you could update this post to address those issues so that everything works out of the box.
Thanks again!
Alicia
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.
Hey Angel, thanks, this really helped!
Just wanted to point out that in the latest Bootstrap dev branch a bunch of input variables have changed names; namely, your
$input-padding-variables need to be updated to$input-btn-padding-, according to this PR: https://github.com/twbs/bootstrap/pull/22287/filesThanks for the heads up. I’ll update the snippets once this becomes an alpha or rc.
Hi, Angel!
Can you update the snippets for Bootstrap 4 Beta?
Took me some time to get back to this. I’ve updated the snippets to work with Bootstrap 4
You, sir, saved my day!