label and input in same line on form-group

Issue

I have a form group with both a label and input

<div class="col-md-12 form-group">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>

However the label displays above the input field, i need it at its side. I have bootstrap 4.0 installed.

I've tried with class="col-sm-2 col-form-label" and does not work either.

Any suggestions?

Solution

The col-sm-2 shouldn't be nested directly in col-md-12. Use the grid like this...

https://www.codeply.com/go/Gdt1BZs9Hg

<form class="col-12">
  <div class="form-row">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
  </div>
</form>

Notice that form-row must used to contain the col-. The col-sm-10 controls the width of the input, so you can change that as needed. Read more in the docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Also, note the correct use of the grid row > columns from the Bootstrap docs...

In a grid layout, content must be placed within columns and only columns may be immediate children of rows... You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

Answered By - Zim