I recently ran into this same problem. (MDN's documentation) says:
size: Valid for email, password, tel, url, and text, the size attribute specifies how much of the input is shown. Basically creates same result as setting CSS width property with a few specialties. The actual unit of the value depends on the input type. For password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels (or px units). CSS width takes precedence over the size attribute.
So in order to control the size of the input box, size wouldn't do it; I had to change the CSS width and/or overwrite Bootstrap's form-control
class. I didn't want to do this, so I removed the form-control
class from my input element. Worked like a charm. I'm quite happy with the results.
By the way, the reason I didn't use other Bootstrap classes to control the width, like flex-
or w-
is that this input element is in a template used in several places. I could pass in classes or I could pass in a size attribute. I'm old. Remembering a single attribute (size) is much easier than remembering a dozen flex-, w-, etc classes.
Like I said, removing the form-control
class solved my problems.