Aligning form elements in one line using bootstrap's grid

Bootstrap's standard CSS for forms and inputs does support more than one input elements and labels in one line using bootstrap's CSS class form-inline.

You can use Bootstrap's grid system to align your input elements and labels, if you want a more complex, but still consistent form layout by adding a few lines of CSS. This is an example aligning two datepicker input elements with inline labels in one line, using the grid system:

To keep the elements vertically aligned in one row, I created the flex-v-center CSS class.

.flex-v-center {
    display: flex;
    align-items: center;
}

The advantages of this approach over inline forms is the possibility to align input elements and their labels consistently over several lines at the same x-position, it works for small screens out of the box (bootstrap's form-inline class does not apply on small screens) and using the flex-v-center the vertical alignment works. But you might (will) get more white space between your elements, especially on large screen, which you can avoid using inline forms.

Here is an example of the same input elements aligned with bootstrap's inline forms. I attach the screenshot because, as you can see in the iframe, bootstrap's form-inline class does not apply on smaller viewports.