Arrange controls Horizontally in Bootstrap

Last Reply on May 13, 2015 07:21 AM By Devendra.M

Posted on May 12, 2015 11:45 PM

I have a Search control that chages the controls used based on the type of search being performed (ID, Type, Status and Date).  Depending on the search selected, the control switched from list to textbox accordingly.  The lists work fine with bootsrap classes but the textboxes only stay alighed when there is no form-control class.  Let me know your thoughts on this issue.  Thanks.

Posted on May 13, 2015 07:21 AM Modified on on May 13, 2015 10:34 AM

Here I have created a sample, which doesn't breaks the alignment of textbox with Bootstrap.

HTML

    <div class="row">
        <div class="col-md-2 text-right col-last">
            Search By :
        </div>
        <div class="col-md-2 col-last">
            <asp:DropDownList ID="ddlStatus" runat="server" CssClass="form-control">
                <asp:ListItem Text="ID" Value="1" />
                <asp:ListItem Text="Type" Value="2" />
                <asp:ListItem Text="Status" Value="3" />
                <asp:ListItem Text="Date" Value="4" />
            </asp:DropDownList>
        </div>
        <div class="col-md-2 col-last">
            <asp:TextBox ID="txtSearch" runat="server" placeholder="Search" CssClass="form-control"></asp:TextBox>
        </div>
        <div class="col-md-2">
            <asp:LinkButton ID="btnSearch" runat="server" CssClass="btn btn-blue" Text="Search"></asp:LinkButton>
        </div>
    </div>

Screenshot