Change width of select tag in Twitter Bootstrap

Question

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

User · Answer

with bootstrap use class input-md   medium  input-lg   large  for more info see https   getbootstrap com docs 3 3 css  forms-control-sizes

User · Answer

I did a workaround by creating a new css class in my custom stylesheet as follows    selectwidthauto        width auto  important      And then applied this class to all my select elements either manually like    lt select id  State  class  selectwidthauto  gt       lt  select gt    Or using jQuery      select   addClass  selectwidthauto

User · Answer

This works for me to reduce select tag s width    lt select id   Select1  class  input-small  gt    You can use any one of these classes   class  input-small   class  input-medium   class  input-large   class  input-xlarge   class  input-xxlarge

User · Answer

For me Pawan s css class combined with display  inline-block  so the selects don t stack  works best  And I wrap it in a media-query  so it stays Mobile Friendly    media  min-width   screen-xs          selectwidthauto            width auto  important           display  inline-block

User · Answer

Tested alone   lt select class input-xxlarge gt  sets the content width of the element to 530px   The total width of the element is slightly smaller than that of  lt input class input-xxlarge gt  due to different padding  If this a a problem  set the paddings in your own style sheet as desired    So if it does not work  the effect is prevented by some setting in your own style sheet or maybe in the use other settings for the element

User · Answer

You can use something like this   lt div class  row  gt        lt div class  col-xs-2  gt          lt select id  info type  class  form-control  gt                lt option gt College lt  option gt                lt option gt Exam lt  option gt          lt  select gt        lt  div gt   lt  div gt    http   getbootstrap com css  column-sizing

User · Answer

In bootstrap 3  it is recommended that you size inputs by wrapping them in col-  -  div tags  It seems that most things have 100  width  especially  form-control elements   https   getbootstrap com docs 3 3 css  forms-control-sizes

[css] Change width of select tag in Twitter Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-2