Change look of select

How Do I...
#1

Hello,

I would really like to change the look of the select2 element. My other elements use the following bootstrap classes: form-control & form-control-sm.

I am using the bootstrap theme for select2 but using those classes does not change the look of the select2 element. I used input-sm which gets it close but it is a few pixels out and the boarder is very slightly different.

I suspect this might be because the theme only supports bootstrap 3 and form-control-sm is from bootstrap 4?

Is there anything I can do?

#2

The only thing I can think of is to modify the select2-bootstrap.css file yourself to correct the problems you’re seeing. As you noted, the Select2 Bootstrap theme was designed for Bootstrap v3.3.7, not Bootstrap 4.x.

#3

Any ideas on what I am looking to edit to make the overall container smaller?

#4

I’m not quite sure what you mean by “overall container”. The Select2 widget is contained in a span.select2.select2-container. However, a DOM element’s size is usually determined by the contents within it. So adjusting the size of the container itself might not help you. You probably need to target the elements inside it—specifically the search box and the dropdown (which is a ul). Your browser’s Object Inspector can help you find the elements you need to target. You will then need to write your own CSS to override the settings provided by the bootstrap theme—probably the padding and font size (those would seem to be the most obvious features to affect the size of the control overall).

#5

I hope thi will solve your query - select2 bootstrap