Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-2

Is this form alignment possible in Bootstrap 2?


I have an old app that uses Bootstrap 2 and the wireframes for a new feature requires me to put a checkbox below a label, but by the side of a multiline textbox.

This picture illustrate the situation:

enter image description here

All of my fields use the following structure:

<div class="row-fluid extended-row">
   <div class="span6">
       <div class="control-group">
           <label class="control-label" for="<%=txtMyField.ClientID %>">
                                    My Field</label>
           <div class="controls">
               <asp:TextBox class="input-large" ID="txtMyField" runat="server" ReadOnly="True" />
           </div>
   </div>
.
.
.
.
</div>

So I don't know how to position the checkbox below as I think that using form layout on bootstrap doesn't allow you to put controls below and next to the label. Is this possible using bootstrap 2?


Solution

  • Ok I found a way of doing this. I can't still align the label to the top, but the result is good enough

    <div class="control-group">
        <div class="control-label">
            <label class="control-label" for="<%= txtCommentary.ClientID %>">Commentary</label><br />
            <input id="chkRepeatfailure" type="checkbox" runat="server" />
        </div>
        <div class="controls">
           <asp:TextBox TextMode="MultiLine" Rows="4" class="input-xlarge" ID="txtCommentary" runat="server"
                                placeholder="" />                                  
        </div>
    </div>