Home > DeveloperSection > Forums > Display two fields side by side in a Bootstrap Form
Tanuj Kumar

Total Post:134

Points:940
Posted on    December-26-2014 6:21 AM

 HTML HTML  Bootstrap 
Ratings:


 1 Reply(s)
 2082  View(s)
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>

 

 



Jeet Verma
Jeet Verma

Total Post:110

Points:776
Posted on    December-26-2014 6:27 AM

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>


Don't want to miss updates? Please click the below button!

Follow MindStick