HTML Placing Input type next to each other

Question

In the following HTML snippet, I would like to display the text fields next to each other:

<div class="home-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-6 col-xs-12">
        <h2>Search...</h2>
        <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
          <!-- div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="email">E-Mail</label>
            <input type="text" class="form-control" name="firstName" [(ngModel)]="model.email" #email="ngModel" required />
            <div *ngIf="f.submitted && !email.valid" class="help-block">E-Mail is required</div>
          </div -->
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" required />
            <input type="text" class="form-control-small" name="powerPlantType" [(ngModel)]="model.powerPlantType" #powerPlantType="ngModel" required />
            <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control-small" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required />
            <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="username">Username</label>
            <input type="text" class="form-control-small" name="username" [(ngModel)]="model.username" #username="ngModel" required />
            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
            <label for="password">Password</label>
            <input type="password" class="form-control-small" name="password" [(ngModel)]="model.password" #password="ngModel" required />
            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
          </div>
          <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary">Register</button>
            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
            <a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

The HTML gets rendered as below:

This is where my css is located:

link rel="stylesheet" href="//demo.productionready.io/main.css"

I'm not so familiar with styling and layout. Could anyone help me please!

EDIT: Updates based on the post below:

`.form-group input[type=text]{ display:inline-block; }` – Pankit Kapadia Sep 05 '17 at 18:26 — Pankit Kapadia, Sep 05 '17 at 18:26

score 1 · Accepted Answer · answered Sep 05 '17 at 18:33

1

<input> is a block level element.

You can read more about block/inline-block/inline element from this answer. Which will help you to understand the layout better.

Use following code to make your form-control-small elements inline:

.form-group .form-control-small{
    display: inline-block;
}
/* Or if you want to show only the text fields 'type=text' next to each other then you can use */
.form-group input[type=text]{
    display: inline-block;
}

answered Sep 05 '17 at 18:33

Pankit Kapadia

1,579
13
25

I added these two elements to the css but still could not get the desired effect! – joesan Sep 05 '17 at 18:44
Can you please share me the fiddle link? So that I can check the output and explain you better? – Pankit Kapadia Sep 05 '17 at 18:45
You will have to put each `label` and `input` inside a separate `div`. Then you can apply `display:inline-block;` to that `div`. – Pankit Kapadia Sep 05 '17 at 18:56
Could you post a fiddle? – joesan Sep 05 '17 at 18:58
I tried your suggestion, but still could not get it to work. Have a look at my updated fiddle: https://jsfiddle.net/Joesan/Lwooo8ku/ – joesan Sep 05 '17 at 18:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153710/discussion-between-pankit-kapadia-and-sparkr). – Pankit Kapadia Sep 05 '17 at 19:00

score 1 · Answer 2 · answered Sep 05 '17 at 18:36

it try help full

<link href="http://demo.productionready.io/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous")
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="home-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-12 ">
        <h2>Search...</h2>
        <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
        
        <div class="row">
       <div class="col-xs-6">
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
           <label for="firstName">First Name</label> <br>
          <input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" required />
          
            <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div>
           
            
          </div>
            </div>
            
             <div class="row">
               <div class="col-xs-6">
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="lastName">Last Name</label><br>
            <input type="text" class="form-control-small" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required />
            <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div>
          </div>
          </div>
        </div>   
          
           <div class="col-xs-6">
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="username">Username</label><br>
            <input type="text" class="form-control-small" name="username" [(ngModel)]="model.username" #username="ngModel" required />
            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
          </div>
          </div>
           <div class="col-xs-6">
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
            <label for="password">Password</label><br>
            <input type="password" class="form-control-small" name="password" [(ngModel)]="model.password" #password="ngModel" required />
            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
          </div>
            </div> </div>
          <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary">Register</button>
            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
            <a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

score 1 · Answer 3 · answered Sep 05 '17 at 18:39

Since you are using bootstrap, you can play with the css.

Wrap your inputs in one row, and each input in a column (4 input = 4 columns md3).

It can be something like this

    <div class="row">
      <div class="col-md-3">
        First Name
        <input type="text">
      </div>

      <div class="col-md-3">
        Last Name
        <input type="text">
      </div>
      <div class="col-md-3">
        User
        <input type="text">
      </div>
      <div class="col-md-3">
        Pass
        <input type="text">
      </div>
    </div>

Maulik · Answer 4 · 2017-09-05T18:21:32.847

Just use the
tag :

<div class="home-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-6 col-xs-12">
        <h2>Search...</h2>
        <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
          <!-- div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="email">E-Mail</label>
            <input type="text" class="form-control" name="firstName" [(ngModel)]="model.email" #email="ngModel" required />
            <div *ngIf="f.submitted && !email.valid" class="help-block">E-Mail is required</div>
          </div -->
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="firstName">First Name</label><br/>
            <input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" required /><br/>
            <input type="text" class="form-control-small" name="powerPlantType" [(ngModel)]="model.powerPlantType" #powerPlantType="ngModel" required /><br/>
            <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="lastName">Last Name</label><br/>
            <input type="text" class="form-control-small" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required /><br/>
            <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="username">Username</label><br/>
            <input type="text" class="form-control-small" name="username" [(ngModel)]="model.username" #username="ngModel" required /><br/>
            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
            <label for="password">Password</label><br/>
            <input type="password" class="form-control-small" name="password" [(ngModel)]="model.password" #password="ngModel" required /><br/>
            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
          </div>
          <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary">Register</button>
            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
            <a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nope! This is not what I want! I need the input type next to each other as shown in this example: http://jsfiddle.net/FZNWB/ — joesan, Sep 05 '17 at 18:21
No not like that! I want to have the label above, the text field below and the next label and the text field should be next to it as shown in this fiddle: http://jsfiddle.net/FZNWB/ — joesan, Sep 05 '17 at 18:28

HTML Placing Input type next to each other

4 Answers4