How to make dropdown selection form on Twitter Bootstrap

Question

They provided sample markup for a regular text input 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 little confused about how markup will look for a picklist. 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 width that you can change accordingly. Take a look at the Grid system on the Bootstrap website to see various options.

Hope this helps

Answer 2

The answer to Lodder is correct for Bootstrap 2.x, but it will not work for Bootstrap 3. This will work with 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> 

Answer 3

And work without value - 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>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> </div> </fieldset> </form>