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.

score 70 · Accepted Answer · answered Dec 06 '12 at 23:51

70

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"

answered Dec 06 '12 at 23:51

Shakeeb Ahmad

2,010
1
25
30

29

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. – Stefan Aug 21 '13 at 21:18
14

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; } – Jeroen K Aug 30 '13 at 13:43
1

a responsible (dynamic) solution would be nice – Stef Hej Jan 07 '17 at 23:31

score 23 · Answer 2 · answered Jul 05 '13 at 06:03

23

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');

answered Jul 05 '13 at 06:03

Pawan Pillai

1,955
5
37
64

1

This is a good solution. But when 3 drop-down menus are added together, this still makes these 3 drop-down menus stack. – Wayne Liu Jan 30 '15 at 09:52
1

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 – Zachary Weixelbaum Jan 10 '18 at 22:03

score 20 · Answer 3 · edited Nov 28 '17 at 14:29

20

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

edited Nov 28 '17 at 14:29

McVenco

1,011
1
17
30

answered Mar 02 '14 at 17:02

user2653789

209
2
2

score 13 · Answer 4 · answered Aug 17 '15 at 11:42

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

score 6 · Answer 5 · answered Mar 11 '15 at 09:39

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

}

score 0 · Answer 6 · answered Aug 22 '12 at 05:41

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.

score 0 · Answer 7 · edited Nov 28 '17 at 14:13

0

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

edited Nov 28 '17 at 14:13

McVenco

1,011
1
17
30

answered Aug 31 '16 at 13:17

KristKing

49
3

This has only effect on the height of the `select` element, not the width. – McVenco Nov 28 '17 at 12:56

Change width of select tag in Twitter Bootstrap

7 Answers7

Linked