Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change width of select tag in Twitter Bootstrap

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.

like image 483
grautur Avatar asked Aug 22 '12 04:08

grautur


People also ask

How do I change the width of a bootstrap select?

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.

How do I change the size of a selection box in bootstrap?

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.


1 Answers

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" 
like image 130
Shakeeb Ahmad Avatar answered Oct 04 '22 03:10

Shakeeb Ahmad