How to make a dropdown select form in Twitter Bootstrap

Question

They've provided the example markup for a regular input-text form:

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

But how could I get something like

Just a bit confused on how the markup would look for a select list. Thanks!

Answer 1

Bootstrap 2.3.2:

<form class="form-horizontal">
    <fieldset>          
        <div class="control-group">
            <label class="control-label">Select:</label>
            <div class="controls">
                <select>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>

Bootstrap 3.x:

<form role="form" class="form-horizontal">
    <fieldset>
      <div class="form-group">
        <label class="col-sm-2 control-label">Select:</label>
        <div class="col-sm-3">
            <select class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
      </div>
    </fieldset>
</form>

col-sm-2 and col-sm-3 define the widths for you can change accordingly. Have a look at the Grid system on the Bootstrap site to see the different variations.

Hope this helps

Answer 2

The answer by Lodder is correct for Bootstrap 2.x, but it will not work for Bootstrap 3. This will work Bootstrap 3:

<form class="form-horizontal">
    <fieldset>          
        <div class="form-group">
            <label class="control-label col-lg-2">Select:</label>
            <div class="col-lg-3">
                <select class="form-control">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>