Question

I’ve got a inline form with Bootstrap 2.0.1 – this form has 3 labels and 3 dropdowns…

What I am trying to do is stretch the dropdowns in a way that the first one is to the left and the third one is to the right of the containing div….I can do this via some float left and right but I was wondering if there is something like this built-in already?

Thoughts?

The code looks like this

<form id="frmOptions" method="post" class="form-inline">
   <label>Option 1:</label>
   <select>---</select>

   <label>Option 2:</label>
   <select>---</select> 

   <label>Option 3:</label>
   <select>---</select>
</form>

Answer 1

Take a look at the fluid width section of the Scaffolding page of the Twitter Bootstrap documentation: http://twitter.github.com/bootstrap/scaffolding.html
You will need to take advantage of the span and row-fluid classes to next your select controls in a fluid width form.

Here’s an example:

<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<form id="frmOptions" method="post" class="well form-inline span12">

     <div class="row-fluid">   
        <div id="formLeft" class="span3">
          <div class="control-group">
            <label for="select1" class="control-label">Option 1:</label>
            <div class="controls">
                <select id="select1">
                    <option>Something</option>
                </select>
            </div>      
          </div>
        </div>

        <div id="formCenter" class="span3">
          <div class="control-group">
            <label for="select2" class="control-label">Option 2:</label>
            <div class="controls">
                <select id="select2">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
        </div>

        <div id="formRight" class="span3">
          <div class="control-group">
            <label for="select3" class="control-label">Option 3:</label>
            <div class="controls">
                <select id="select3">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
    </div>   

</form>
</div>
</div>

Here is the above example on jsFiddle: http://jsfiddle.net/CdNef/

Here is the same example with the labels inline, rather than on top of the dropdown: http://jsfiddle.net/gbumP/