forum

Home / DeveloperSection / Forums / Display two fields side by side in a Bootstrap Form

Ask Question

Display two fields side by side in a Bootstrap Form

Anonymous User 8008 26-Dec-2014

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>

 

 

html html  bootstrap 
Updated on 27-Apr-2023
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

27-Apr-2023

To display two fields side by side in a Bootstrap form, you can use the grid system by dividing the form into two equal-width columns using the col-6 class for each column. Here's an example:

<form>
 <div class="form-row">
   <div class="form-group col-6">
     <label for="field1">Field 1</label>
     <input type="text" class="form-control" id="field1">
   </div>
   <div class="form-group col-6">
     <label for="field2">Field 2</label>
     <input type="text" class="form-control" id="field2">
   </div>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>

In this example, the form-row class is used to group the columns together, and each column has the form-group class to style the form fields. The col-6 class is used for both columns, which makes them each take up half of the available width.

By default, Bootstrap uses a 12-column grid system, so you can adjust the column widths as needed by using other classes like col-4 (for one-third width) or col-8 (for two-thirds width), for example.

Anonymous User

Anonymous User

26-Dec-2014

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>

Liked By