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>Which will look like this:
Here's a Stack Snippet Demo:
I'll leave it as an exercise to the reader to translate it into an asp:textbox element
@KyleMit's answer on Bootstrap 4 has changed a little
<div class="input-group"> <input type="text" class="form-control"> <div class="input-group-prepend"> <span class="input-group-text">-</span> </div> <input type="text" class="form-control"></div>
The problem is that .form-control class renders like a DIV element which according to the normal-flow-of-the-page renders on a new line.
One way of fixing issues like this is to use display:inline property. So, create a custom CSS class with display:inline and attach it to your component with a .form-control class. You have to have a width for your component as well.
There are other ways of handling this issue (like arranging your form-control components inside any of the .col classes), but the easiest way is to just make your .form-control an inline element (the way a span would render)