Icarus3 Icarus3 - 4 months ago 16
CSS Question

How to align (width wise) bootstrap select dropdown with input box?

I am using bootstrap select on my form. just below that I am having an input box.
I would like to have input box's width similar to select box.

<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<input class="form-control" id="input_id" type="text" value="" />
</div>
<div class="col-md-2">
</div>
</div>
</div>


Please see: https://jsfiddle.net/5L30q27f/8/

In bootstrap-select.css, it appears that width has been set to 220px.
I could use the exact width for my input box but I do not think that would be a good idea, since I suspect on mobile devices bootstrap-select might be changing that width to something else.

Currently, I am controlling my input box's width using columns, but it is not the right solution. ( width appears to vary depending on the screen size ).

I am using bootstarp first time. So there is a good chance that I am overlooking something obvious which is provided by bootstrap to solve this problem.

Could you please point me to a right direction?

Answer

Bootstrap has a few options for setting the width of an element depending on screen size http://getbootstrap.com/css/#grid-options. changing the gird to use the xs option in you fiddle gets the result you want.

https://jsfiddle.net/5L30q27f/9/