How do I change the width of a select field, when using Twitter bootstrap? Adding input-xxlarge
CSS classes doesn't seem to work (like it does on other form elements), so the elements in my drop down are currently cut off.
Width. Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths. Alternatively, use the data-width attribute to set the width of the select. Set data-width to 'auto' to automatically adjust the width of the select to its widest option.
If you need to set a custom size you will have to use 2 different custom classes or target select boxes and input boxes individually. The input boxes need to be 14px smaller than select boxes (as do text areas). Show activity on this post. inside a div and apply class="col-sm-2" on the div.
This works for me to reduce select tag's width;
<select id ="Select1" class="input-small">
You can use any one of these classes;
class="input-small" class="input-medium" class="input-large" class="input-xlarge" class="input-xxlarge"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With