Just came across your css today and will be using it from now on. I did make a few changes after going through it... some specific to my own project, but might be useful. If anything, the validation focus additions I made should be added to the project.

/*CUSTOM SELECT2 STUFF GOES HERE*/
/*for everything to be correct font-size*/
.select2-container--bootstrap4 {
    font-size: $font-size-base !important;
}

/*search field*/
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
	padding-left: calc(.5rem - 1px);
	padding-right: .5rem;
}

/*results for current rendered selection*/
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	padding-left: $input-padding-x;
	padding-right: $input-padding-x;
}

/*dropdown*/
.select2-container--bootstrap4 .select2-dropdown {
	z-index:$zindex-dropdown; /*z-index 1000*/
}

/*dropdown results for items*/
.select2-container--bootstrap4 .select2-results__option {
	padding-left: $input-padding-x;
	padding-right: $input-padding-x;
}

/*dropdown results for optgroup titles*/
.select2-container--bootstrap4 .select2-results__group {
	padding-left: $input-padding-x;
	padding-right: $input-padding-x;
	background-color: $gray-100;
}

/*dropdown results for nested items (like in optgroups)*/
.select2-container--bootstrap4 .select2-results__options--nested .select2-results__option {
    padding-left: calc(#{$input-padding-x + .75rem});
    padding-right: $input-padding-x;
}

/*dropdown selected*/
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
	background-color: lighten($primary, 47%);
	color: #333;
}

/*dropdown hover*/
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-dropdown .select2-results__option--highlighted[aria-selected=true] /*comment this line out to not highlight selected item*/ {
	background-color: $primary;
	color: #fff;
}

/*dropdown arrow color*/
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
	border-color: $gray-500 transparent transparent transparent;
}

/*validation focus*/
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection {
    box-shadow: 0 0 0 $input-btn-focus-width rgba($danger, .25);
}
select.is-valid ~ .select2-container--bootstrap4 .select2-selection {
	box-shadow: 0 0 0 $input-btn-focus-width rgba($success, .25);
}

Hi there, this appears to be a frequently used theme for Select2 and I wanted to give you a heads up about upcoming changes to the Select2 CSS/HTML in the next, release 4.1.0. The release date for this theme has not yet been determined, but we are about to roll 4.1.0-beta.1 which features many of these changes.

• Dedicated classes have been introduced to handle highlights instead of only using ARIA attributes: select2/select2#5841
• aria-selected no longer reflects selected results and instead reflects the highlighted result: select2/select2#5841
• Clear/remove icons have been switched to use <button> tags instead of clickable <span> tags: select2/select2#5842
• The location of the clear button has been moved outside of the rendered selection area: select2/select2#5842
• The location of the search box on a multiple select has been moved outside of the rendered selection area: select2/select2#5842
• Selected choices in a multiple select are no longer aligned using CSS float: select2/select2#5842

While many of these should not significantly impact the display of this theme, some of these are going to require modifying the existing CSS to make it look Boostrap-like again. Unfortunately we do not believe that these changes are able to be made backwards-compatible with existing versions of Select2, largely because of the HTML changes that forced the multiple select to be rendered differently.

Feel free to reach out to us about any bugs you encounter or questions you have about these changes.

When I scroll I get "loading more results" or whatever, but they never appear. If i comment out the theme, it works.

How can I change the default selected background color?

Hello.
first of all thanks for creating this theme and syncing Select 2 with Bootstrap 4
I added a few lines to your code to resolve the problem of compatibility with RTL direction.
You can add these lines to your codes to solve the problem.

html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    margin-left: auto;
    margin-right: -4px;
}
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow
{
    left: 3px;
    right: auto;
}
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice
{
    padding-right: 0;
    padding-left: 5px;
    float: right;
    margin-right: 0;
    margin-left: 5px;
}
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove
{
    margin-left: 1px;
    margin-right: 3px;
    float: right;
}
html[dir='rtl'] .input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
    border-top-right-radius: 0;
    border-top-left-radius: 0.2rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0.2rem; }
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection__clear {
    padding-right: 0.3em;
    padding-left: 0;
    float: left;
    margin-right: auto;
    margin-left: 0.3em;
}

I faced this problem in production and I tried it with the online demo provided in the readme and I'm certain this is the theme's problem. (as the problem wasn't there when I disabled the theme).
Unlike the select2 default theme itself, this theme does not control overflow, try increasing number of your options in the example to over 20.
This will even override the page size and cause the whole page to overflow.

Dropdown is not showing proper styling for disabled options (Bulloch Animal Shelter in the example below)

{
   "results":[
      {
         "id":"1",
         "text":"Community",
         "disabled":false
      },
      {
         "id":"2",
         "text":"Bulloch Animal Shelter",
         "disabled":true
      },
      {
         "id":"3",
         "text":"Metter Animal Shelter",
         "disabled":false
      },
      {
         "id":"4",
         "text":"Evans County Animal Shelter",
         "disabled":false
      }
   ],
   "pagination":{
      "more":false
   }
}

Select2 default theme:

With this repo theme. item is disabled but not styled as such:

I have a hard time with installing this, I run the command
$ npm install @ttskch/select2-bootstrap4-theme
and then in documents it says to include this
<link rel="stylesheet" href="/path/to/select2.css">
<link rel="stylesheet" href="/path/to/select2-bootstrap4.css">
And I just don't know what my path/to is and where to look for it. Can someone help me with this?

can add support for not support for prepend and Append:

select2-bootstrap4-prepend

When using select2 with multi select, input-group and the total length of items is smaller than the form group, the prepend and
append groups are aligned correctly:

But if more items are added, the prepend and append groups move to a new line:

Hi,

Can we use class size of bootstrap like .form-control-lg and .form-control-sm?

Thanks..

There is some issue with Select2 (Bootstrap4 Theme) height, have a look

I use bootstrap v4.3.1 and and select2-bootstrap4-them v1.2.2
The background of select is grey at place of white.
And it seem labels are not correctly aligned verticaly.
I had fixed the problem with those lines :
.select2 { background-color: #fff; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height: 2.45em; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { margin-top: 0.5em; }

Thanks for your job ;-)

The theme doesn't seem to be working on the tags element. This is the code I am using below. But the image shows the differance between the Select2 field and the BS4 field

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/select2-bootstrap4.css" type="text/css" />

<select class="form-control js-example-tags" name="caller" autofocus>
<option></option>
<option>Other</option>
<option>Pit Lane</option>
</select>

$('select').select2({
theme: 'bootstrap4',
});

$(".js-example-tags").select2({
tags: true
});

Weird issue with li width not being set to 100% in css file in dist location. This happens in Chrome Version 81.0.4044.122 (Official Build) (64-bit)

.select2-search.select2-search--inline { width: 100%; }

Resolves the issue.

Hi,

If in the Bootstrap variable file we disable the rounded border, the theme does not reflect this option.

Bootstrap 4.3.1 - file "_variables.scss" - line 110
If replace value $enable-rounded: true !default; to $enable-rounded: false !default;

Then

select2-bootstrap4-theme 1.3.2 - file "layout.scss" - line 92
Replace

&.select2-dropdown--above {
    border-top: 1px solid $input-border-color;
    border-top-left-radius: $input-border-radius;
    border-top-right-radius: $input-border-radius;
}

to

&.select2-dropdown--above {
    border-top: 1px solid $input-border-color;
    @include border-top-radius($input-border-radius);
}

select2-bootstrap4-theme 1.3.2 - file "_single.scss" - line 43
Replace

.select2-search--dropdown .select2-search__field {
    border: $input-border-width solid $input-border-color;
    border-radius: $input-border-radius;
}

to

.select2-search--dropdown .select2-search__field {
    border: $input-border-width solid $input-border-color;
    @include border-radius($input-border-radius, 0);
}

select2-bootstrap4-theme 1.3.2 - file "_multiple.scss" - line 17
Replace

 .select2-selection__choice {
    color: $dark;
    border: 1px solid darken($light, 20%);
    border-radius: $btn-border-radius-sm;
    padding: 0;
    padding-right: 5px;
    cursor: pointer;
    float: left;
    margin-top: 0.3em;
    margin-right: 5px;
}

to

.select2-selection__choice {
    color: $dark;
    border: 1px solid darken($light, 20%);
    @include border-radius($input-border-radius-sm, 0);
    padding: 0;
    padding-right: 5px;
    cursor: pointer;
    float: left;
    margin-top: 0.3em;
    margin-right: 5px;
}

When enable bootstrap 4 theme on latest version of select 2 with rtl direction it return to ltr and when disable theme it working great again.

form-control-sm resizes the select2 tags but not the container itself.

right side is rounded incorrectly...

As seen in the image below when you have a multi select and a prepend, if your selects go onto a second line it causes the entire box to drop onto the next line instead of growing on the same line.

<!DOCTYPE html>
<html>
<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- select2 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

  <!-- select2-bootstrap4-theme -->
  <link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
  <link href="select2-bootstrap4.css" rel="stylesheet"> <!-- for local development env -->
</head>

<body class="pt-5" style="min-height:90vh">

<div class="container">
  <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" target="_blank">@ttskch/select2-bootstrap4-theme</a></h3>
  <hr>

  <form>
    <div class="form-group">
      <label>Example of multiple select</label>
          <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Prepend</span>
      </div>
      <select multiple placeholder="Choose anything" data-allow-clear="1">
        <option>1fvfvfvffv</option>
        <option>2</option>
        <option>fvfvfvffvf3</option>
        <option>vfvfvvfvvf4</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
        <option>5vfvfvffvff</option>
      </select>
    </div>
  </div>

  </form>
</div>

<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
<!-- select2-bootstrap4-theme -->
$(function () {
  $('select').each(function () {
    $(this).select2({
      theme: 'bootstrap4',
      width: 'style',
      placeholder: $(this).attr('placeholder'),
      allowClear: Boolean($(this).data('allow-clear')),
    });
  });
});
</script>
</body>
</html>

normally a dropdown should be like

and its like that but only when multiselect is off
but when multiselect option is on its like this:

<select name="teacher_id[]" class="form-control select2" multiple="true">
...
</select>

//js 
$.fn.select2.defaults.set( "theme", "bootstrap4" );
$('.select2').select2();

the list will increase to 60 or so it a search field is needed or else i would have disabled it

here is head include css i got from Admin lte 3 3.1.0-rc
https://pastebin.com/3DAWBYSx

these are all the css file i included but i dont think any of these are conflicting

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/fontawesome-free/css/all.min.css") }}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/icheck-bootstrap/icheck-bootstrap.min.css") }}">
  <!-- JQVMap -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/jqvmap/jqvmap.min.css") }}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{ asset("backend/dist/css/adminlte.css") }}">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/overlayScrollbars/css/OverlayScrollbars.min.css") }}">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/daterangepicker/daterangepicker.css") }}">
  <!-- summernote -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/summernote/summernote-bs4.min.css") }}">
  <!-- Select2  theme -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/select2/css/select2.min.css") }}">
  <!-- Select2 bs4 theme -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css") }}">
  <!-- Bootstrap4 Duallistbox -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css") }}">
  <!-- BS Stepper -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/bs-stepper/css/bs-stepper.min.css") }}">
  <!-- icheck bootstrap  -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/icheck-bootstrap/icheck-bootstrap.min.css") }}">
  <!-- datatables bootstrap  -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css") }}">
  <!-- Custom Css -->
  <link rel="stylesheet" href="{{ asset("css/wickedpicker.min.css") }}">
  <link rel="stylesheet" href="{{ asset("css/bootstrap-datetimepicker.min.css") }}"  />

I check it no other css are causing the error 🤔 except adminlte.css (Admin LTE v3 here) since its main theme of website
I also updated it to latest css version by replacing the code from repo

not rounded 😵

I have installed it and it is shown in my package.json file but cannot find it in node modules directory.

Had to add this to my scss file to fix:

.select2-results__options--nested {
  li {
    padding-left: 1em !important;
  }
}

"Send me a Pull Requeest" should be "Send me a Pull Request". This is a very critical issue that must be fixed immediately.
Its under the "Getting involved" Section btw.

cannot use allowClear, but when i delete theme: 'bootstrap4' the allowClear is working

The icon is a down triangle instead of a down chevron... I tweaked your demo page using the browser console to show the problem: https://jsfiddle.net/t2prb6ds/

Hi, can we get recent releases published to a CDN, for easier installation?

cdnjs appears to be out of date:

https://cdnjs.com/libraries/select2-bootstrap-theme

Is this theme support for select2 multiple tagging?

The default style is like this:

But when I applied the theme:

$('.tagging').select2({theme: 'bootstrap4', tags: true});

The style is ugly:

Is there any instruction for this or it's not available?

The selected option's padding (select2-selection) is pulled from the wrong bootstrap variables:

$s2bs-padding-base-horizontal: $custom-select-padding-y !default;
$s2bs-padding-base-vertical: $custom-select-padding-x !default;

It should be the other way round: horizontal is X axis and vertical is Y axis.

I have added required param and submitting empty value. while other fields shows error as expected the select field does not.

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

is there a reason why this package uses the input field variable instead of the custom-select-% variables?

https://github.com/twbs/bootstrap/blob/7a6da5e3e7ad7c749dde806546a35d4d4259d965/scss/_variables.scss#L575

I had a custom drop-down indicator on my normal select fields but when I installed this package, I lost that customization. Looking through your source code, it doesnt look like any of these variables are used.

Is there a particular reason for this?

When we apply select2 pagination and lazy loading to show progressive options using ajax, this does not work. Any solution?

In my styles.scss,
I import _variables.scss to modify boostrap default $blue variable which changes bootstrap's $primary colour.

but this change is not picked up by your layout.scss because you are importing bootstrap variables again.

// layout.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

Because of this mouse hovered item doesn't display the right colour:

    // mouse hovered item
    .select2-results__option--highlighted,
    .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
        background-color: $primary;
        color: $light;
    }

When using this theme with Select2 on a <select /> with optgroups the options for each group receive the .select2-results__options class. As a result, each group incorrectly has a max-height and overflow set on it which will scroll each group within the dropdown.

I reckon that only elements which are a direct descendant of .select2-results should have a max-height and overflow.

Here's an example of this in action.

Fixed with #12.

Hi!

I noticed that there are unreleased fixes sitting on master. Are there any plans for the next release?

Thanks and best, Sebastian

I noticed that there is no top border in dropdowns that open upwards.

When you have a smaller input field than in the live demo and add several selections that are overall longer than the field, the field does not grow as expected (it does in original select2) but the elements are displayed below the field.

im not a fan of the forcing of using secondary for many of the label colours etc. wouldnt it be better if you included a _variables.scss file similar to how bootstrap does it with !default? that way we can override the defaults with say $select2-theme-bootstrap4-secondary: $gray;

$select2-theme-bootstrap4-input-bg: $input-bg !default;
$select2-theme-bootstrap4-input-border-radius: $input-border-radius !default;
$select2-theme-bootstrap4-input-box-shadow: $input-box-shadow !default;
$select2-theme-bootstrap4-input-transition: $input-transition !default;
$select2-theme-bootstrap4-input-focus-border-color: $input-focus-border-color !default;
$select2-theme-bootstrap4-input-focus-box-shadow: $input-focus-box-shadow !default;
$select2-theme-bootstrap4-input-disabled-bg: $input-disabled-bg !default;


$select2-theme-bootstrap4-secondary: $secondary !default;

should be as easy as finding $ and then just prefixing them with a prefix and setting up a _variables.scss file

When running npm build on a repository that depends on this, I get a lot of deprecation warnings due to SCSS that does math without encompassing it in the calc() function. Is a fix for this in the works? If not I would be happy to work on one and make a PR when I have the time, just let me know! :)

Hi there, i am rewriting the an old web app. I want it to be the latest at everyting, today i changed bootstrap 4 to bootstrap 5 and using select, some theme is messy.

Can we expect bootstrap 5 theme any time soon ?

If I use gulp-sass instead of sass-loader to compile SCSS source code, I will not be able to proceed.

I think it is better to add in webpack.config.js:

{
    loader: 'sass-loader',
    options: {
        prependData: `
            @import "~bootstrap/scss/functions";
            @import "~bootstrap/scss/variables";
            @import "~bootstrap/scss/mixins";
        `
    }
}