[Bug]: bootstrap 5.3 styles bug

[Datzu712]

Bug description

I'm using bootstrap 5.3.3 with tom select 2.3.1 and when I try to create a select, there is a strange box around the select:

Expected behavior

I think it should look something like this for example:

Steps to reproduce

You can check what I mean here:
https://codepen.io/Datzu712/pen/zYVdRvo?editors=1000

I realized what happens when you put the form-select class in it that weird border appears

Additional context

• OS: Ubuntu
• Browser: chrome
• Version chrome 127.0.6533.99 / ubuntu 22
• Device: ?

[xJuvi]

Hey
it's not a bug. Your use the regular Theme. For bootstrap add bootstrap5 to the css link. You can find the alternative theme files (bootstrap) in the dist folder on jsdelivr.

After changing the css file to the correct one the select looks like expected.

Kind regards.

[body-clock]

Yeah, I think the Styling Examples page on the main site is a little confusing. I don't really understand what it's trying to communicate. Left column with no item styling and right column with item styling? I ran into this same behavior when I was attempting to style with Bootstrap 5. Just import the bootstrap theme CSS instead of the main CSS and you should be good.

[xJuvi]

The styling example only show the results from different bootstrap options. The key point which solce your problem is to change the main css against the bootstrap5 css - otherwise the bootstrap styling doesn't take effect.

[body-clock]

Yeah, I'm aware - you may be responding to OP and not me, but I do think it's worth mentioning that the styling page leads a new user to believe that they can add these classes to apply the Bootstrap theming. I think, since both me and the other user ran into this issue, there is an opportunity to improve the docs/language on that page to better communicate how to style Tom Select with Bootstrap.

[github-actions]

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days