Set the height of a 'select' element in Bootstrap 3?

Question

How can I set the height of a select element in Bootstrap 3?

Here is my code:

<select id="lst-size" name="p_size" class="col-lg-12 col-md-12 col-sm-4 col-xs-12">
  <option value="<?php echo "size1" ?>" selected="selected"><?php echo "{$rst_catalog['p_size1']}" ?></option>
  <option value="<?php echo "size2" ?>"><?php echo "{$rst_catalog['p_size2']}" ?></option>
  <option value="<?php echo "size3" ?>"><?php echo "{$rst_catalog['p_size3']}" ?></option>
  <option value="<?php echo "size4" ?>"><?php echo "{$rst_catalog['p_size4']}" ?></option>
  <option value="<?php echo "size5" ?>"><?php echo "{$rst_catalog['p_size5']}" ?></option>
  <option value="<?php echo "size6" ?>"><?php echo "{$rst_catalog['p_size6']}" ?></option>
</select>

And the live website.

Solution 1

Try to add the class .form-control to your select element:

<select id="lst-size" name="p_size" class="form-control col-lg-12 col-md-12 col-sm-4 col-xs-12">

Solution 2

Quite late, but with another flavor for those who freshly bump into this:

As of the time of posting this, and in the case of multiple select (which to start with, is the query that even led me here), the size attribute works nicely e.g size="5". See sample below;

<select class="form-control" id="items" name="items" size="5" multiple>
    <option value="<?php echo "sizeX"> itemX </option>
</select>