How to inline form control input with label

Question

Using Bootstrap 4, how do you get a form control input to inline with the label. I couldn't find any examples of how to inline form controls while maintaining responsive rows and columns per form group.

The problem I'm having is that the labels take up a whole block, I want a more compact controls where the label is on the same block as the control while still having each group of labels and inputs be in a responsive grid.

<form action="#" autocomplete="nope">
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="companyName" class="mr-2 col-form-label-sm">Name:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="companyName" id="companyName" placeholder="Company Name" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="version" class="mr-2 col-form-label-sm">Version:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="version" id="version" placeholder="Version" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="notes" class="mr-2 col-form-label-sm">Notes:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="notes" id="notes" placeholder="Notes" pattern="^.+$" value="">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-lg-12">
            <button type="submit" class="btn btn-primary btn-sm">Add</button>
            <button type="button" class="btn btn-light btn-sm ml-1">Cancel</button>
        </div>
    </div>
</form>

Answer 1

You can add below code to achieve this.

.form-group.col-md-4 {
    display: flex;
    align-items: center;
}

.form-group.col-md-4 {
    display: flex;
    align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form action="#" autocomplete="nope">
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="companyName" class="mr-2 col-form-label-sm">Name:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="companyName" id="companyName" placeholder="Company Name" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="version" class="mr-2 col-form-label-sm">Version:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="version" id="version" placeholder="Version" required="" pattern="^.+$" value="">
        </div>
        <div class="form-group col-md-4">
            <label for="notes" class="mr-2 col-form-label-sm">Notes:&nbsp;</label>
            <input type="text" class="form-control form-control-sm" autocomplete="off" name="notes" id="notes" placeholder="Notes" pattern="^.+$" value="">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-lg-12">
            <button type="submit" class="btn btn-primary btn-sm">Add</button>
            <button type="button" class="btn btn-light btn-sm ml-1">Cancel</button>
        </div>
    </div>
</form>
</div>

Answer 2

I was having the same problem. @Athul's answer is good, but I wanted everything to line up nicely and to always have one label + control on each row. So I came up with this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="form-row">
    	<div class="form-group col-12 col-sm-4 col-md-3 col-lg-3">
    		<label for="Name" style="padding-top:0.375rem">Name</label>
    	</div>
    	<div class="form-group col-12 col-sm-8 col-md-9 col-lg-9">
    		<input type="text" id="Name" name="Name" class="form-control-plaintext" value="Some Name Here" readonly />
    	</div>
    </div>
    
    <div class="form-row">
    	<div class="form-group col-12 col-sm-4 col-md-3 col-lg-3">
    		<label for="Seconds" style="padding-top:0.375rem">Seconds</label>
    	</div>
    
    	<div class="form-group col-12 col-sm-8 col-md-9 col-lg-9">
    		<input type="number" id="Seconds" name="Seconds" class="form-control" />
    </div>

This works well for me.

NOTE: I only needed this for one form, not everywhere... otherwise I would create recommend a custom CSS class for padding that I've added to the labels.