Display two fields side by side in a Bootstrap Form

Question

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

Answer 1

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>

Which will look like this:

Here's a Stack Snippet Demo:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<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>

I'll leave it as an exercise to the reader to translate it into an asp:textbox element

Answer 2

For Bootstrap 4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

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