How to use it with bootstrap 5?

[ithekozub]

How to use it with bootstrap 5?

[kstep]

I ended up with the following CSS (as of version 1.0.48, bootstrap 5.3.5):

.vscomp-toggle-button {
    border: none;
    padding: 0;
    box-shadow: none !important;
}
.vscomp-wrapper {
    font-size: inherit;
    font-family: inherit;
}
.vscomp-arrow {
    width: auto;
}
.vscomp-arrow:after {
    margin-top: 0;
    height: 12px;
    width: 16px;
    background-size: 16px 12px;
    background-image: var(--bs-form-select-bg-img);
    border: none;
    transform: none;
}
.form-select.pop-comp-active {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 252, 0.25);
}

[temaxuck]

If you'd like to add bootstrap styles, you could simply provide additional classes:

VirtualSelect.init(
  // ...
  additionalToggleButtonClasses: "btn",
  additionalDropboxContainerClasses: "dropdown-menu"
);

Here's what it looks like: