DISPLAY TWO FIELDS SIDE BY SIDE IN A BOOTSTRAP FORM

Tanuj Kumar

Total Post:134

Points:940
Posted by  Tanuj Kumar
 5596  View(s)
Ratings:
Rate this:

I am trying to display a year range input on a form that has a 2 textboxes. One for the min and one for the max and are separated by a dash.

I want this all on the same line using bootstrap, but I cannot seem to get it to work correctly.

Here's my code:

<form id="Form1" class="form-horizontal" role="form" runat="server">
    <div class="row">
        <div class="form-group">
            <label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
            <div class="col-sm-4">
                <asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
            </div>
            <label class="col-sm-2 control-label">-</label>
            <div class="col-sm-4">
                <asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
            </div>
        </div>
    </div>
</form>

 

 

  1. Jeet Verma

    Post:110

    Points:776
    Re: Display two fields side by side in a Bootstrap Form

    How about using an input group to style it on the same line? 

    Here's the final HTML to use: 

    <div class="input-group">
        <input type="text" class="form-control"placeholder="Start"/>
        <span class="input-group-addon">-</span>
        <input type="text" class="form-control" placeholder="End"/>
    </div>

      Modified On Apr-07-2018 05:43:10 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!