Bootstrap 5.3 select style

[diedel]

Is there an easy way to use Bootstrap styling?

https://getbootstrap.com/docs/5.3/forms/select/

The closest I have been able to get is by using styleMode="noStyle" and class="form-control".

[Zefling]

Maybe there are some CSS variables missing to get there.

[diedel]

Applying these styles it looks very similar to the default Bootstrap input:

form.component.css

select2 {
    --select2-selection-multiple-padding: 0;
    --select2-multiple-height: 24px;
    --select2-selection-border-color: var(--bs-border-color);
    --select2-selection-border-radius: var(--bs-border-radius);
}

:host::ng-deep .select2-container--default .select2-selection--multiple {
    padding: .375rem .75rem;
}

:host::ng-deep .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    min-height: 1.5em !important;
}

:host::ng-deep .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    margin-top: 0 !important;
}

form.component.html

<select2 id="roleNature" [data]="roles" [templates]="template" multiple
  displaySearchStatus="hidden" [placeholder]="t('choose_option')" formControlName="roleNature">
  <ng-template #template let-value="value">{{t(value)}}</ng-template>
</select2>

Image 1 - Bootstrap select

Image 2 - ng-select2 select multiple with the above styling applied

Image 3 - Bootstrap input vs ng-select2 select multiple with custom style

[Zefling]

Thank you. So more CSS variables would be needed. It doesn't seem very complex to me.

We can add the style in a help file or the readme.