Search code examples
htmlcssangular-forms

How can I make the form to center of screen

I have created an contact form, i tried forms but bootstrap but unable to move it to center of the screen. Can you please help me to move this and arrange a box around the forms.Which i could not do. I am trying this in angular 8 enter image description here

    <div class="container">
<h2 >Contact Form</h2>
<div class="container"> 
<form [formGroup]="profileForm"(ngSubmit)="onSubmit()">

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Your Name:</label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="yourname" >
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label"> Email: </label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="email">

  </div>
</div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">  Items:</label>
    <div class="col-sm-5">
      <select id="Item" class="form-control" formControlName="item">

          <option *ngFor="let c of item"  [ngValue]="c">{{ c }}</option>

      </select>
    </div>
    </div>

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Name: </label>
  <div class="col-sm-5">
    <input type="text" class="form-control" formControlName="name">
  </div>
  </div>


<div class="form-group row">
  <label class="col-sm-2 col-form-label">
    Remarks:</label>
    <div class="col-sm-5">
    <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
</div>
</div>
<div class="dialog">
  <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
  </form>
</div>  

</div>

CSS below:

.container {
    display: block;
    border: 2px black;
    border-radius: 4px;
    box-sizing: border-box 1px black;
  }
Solution 
  •         <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2>Contact Form</h2>
                    </div>
                    <div class="card-body d-flex justify-content-center">
                        <form class="w-75" [formGroup]="profileForm" (ngSubmit)="onSubmit()">

                            <div class="form-group row">
                                <label class="col-2 col-form-label"> Your Name:</label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="yourname">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Email: </label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="email">

                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Items:</label>
                                <div class="col">
                                    <select id="Item" class="form-control" formControlName="item">

                                        <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>

                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Name: </label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="name">
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    Remarks:</label>
                                <div class="col">
                                    <textarea class="form-control" type="text" formControlName="remarks"
                                        rows="3"></textarea>
                                </div>
                            </div>
                            <div class="dialog">
                                <button type="submit" color=#C93C6A class="btn-block"
                                    [disabled]="!profileForm.valid">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>