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.

Alarice

Answer 1

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"

Idiotism

Just want to note that this doesn't work in bootstrap 3. These classes now only have an effect on the height/padding of the control. – Moravia

For twitter bootstrap 3, add: .input-mini { width: 60px; } .input-small { width: 90px; } .input-medium { width: 150px; } .input-large { width: 210px; } .input-xlarge { width: 270px; } .input-xxlarge { width: 530px; } – Diverge

a responsible (dynamic) solution would be nice – Hyacinthie

Answer 2

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:

<select id="State" class="selectwidthauto">
...
</select>

Or using jQuery:

$('select').addClass('selectwidthauto');

Livvi

This is a good solution. But when 3 drop-down menus are added together, this still makes these 3 drop-down menus stack. – Fatherhood

I don't if you still need help three years later, bur for those coming you can add display:inline-block so they don't stack – Marmion

Answer 3

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

Streaming

Answer 4

You can use something like this

<div class="row">
     <div class="col-xs-2">
       <select id="info_type" class="form-control">
             <option>College</option>
             <option>Exam</option>
       </select>
     </div>
</div>

http://getbootstrap.com/css/#column-sizing

Cholula

Answer 5

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;
    }

}

Wyly

Answer 6

Tested alone, <select class=input-xxlarge> sets the content width of the element to 530px. (The total width of the element is slightly smaller than that of <input class=input-xxlarge> 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.

Cuticula

Answer 7

with bootstrap use class input-md = medium, input-lg = large, for more info see https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

Buckwheat

This has only effect on the height of the select element, not the width. – Retrocede