label and input in same line on form-group

Question

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 1

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.

Solution 2

You can achieve it by using class form-inline

<div class="form-inline">
    <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>
</div>

Solution 3

The suggestions in other posts didn't work in Bootstrap 5. So I tested it by updating one of the demos in the Bootstrap 5 documentation and it worked. With this demo application, <label>, <input> and <button> elements can be defined in a single line:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<form role="form">
  <div class="input-group flex-nowrap">
    <span class="input-group-text" id="addon-wrapping">Article Title</span>
    <input type="text" class="form-control" placeholder="Please enter the new article name..." aria-label="Username" aria-describedby="addon-wrapping">
    <button class="btn btn-primary" type="submit" id="article-update-button">Update</button>
  </div>
</form>

The form screenshot is available below: For more information, visit the Bootstrap 5 Input Group page.

Solution 4

See Bootstrap 4 documentation about Forms and use form-inline

<div class="col-md-12 form-group form-inline">
     <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>

View more solutions