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

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)