Input row: code & specs

This page documents the expected code output and structure necessary to display input rows correctly in the UI.

Input row base code

The input row leverages Bootstrap’s grid system to align inputs side by side. Add the .input-row class to ensure correct spacing between fields.

Validation message
Validation message
html 
<div class="row input-row">
    <div class="col">
        <div class="input">
            ...
        </div>
    </div>
    <div class="col">
        <div class="input">
            ...
        </div>
    </div>
</div>

Input size

Input rows can use Bootstrap’s grid classes to control the width of each input. Use .col for equal-width fields or numbered classes .col-* to assign specific widths within the row.

Bootstrap’s grid is based on 12 columns, so numbered classes can range from .col-2 to .col-12, allowing precise control over the relative width of each input while keeping them aligned inline.

Validation message
Validation message
html 
<div class="row input-row">
    <div class="col">
        <div class="input">
            ...
        </div>
    </div>
    <div class="col-4">
        <div class="input">
            ...
        </div>
    </div>
</div>