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>
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:
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.
How about using an input group to style it on the same line?
Here's the final HTML to use: