CODEWITHSUNDEEP
angularbootstrap-4
Anjali
Anjali

Reputation: 2698

Bootstrap - making one text box longer than others

I have three text boxes on my page. I want to make one text box bigger than others. I tried writing the below code:

<div class="row">
      <div class="col-md-3">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="Last Name"  >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-3">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="First Name" >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-8">

        <mat-form-field (keydown.enter)="$event.preventDefault()">
            <input matInput placeholder="E-mail"  >
        </mat-form-field>
        <mat-error >Required</mat-error>
    </div>


  </div>

I want the email text box to become bigger/lengthier. I tried putting col-md-8. If I do that then the text box moves to the next row. I want all three text boxes on the same row.

Below is the image of the page:

enter image description here

when I changed the first text box to col-md-2 and sewcond to col-md-2 and third one to col-md-8 then the text box moves to another row. Below is the image: enter image description here

Upvotes: 1

Views: 67

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

Total col count up to 12 so if u want to make 8 last one then make others 2

<div class="row">
      <div class="col-md-2 col-sm-2">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="Last Name"  >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-2 col-sm-2">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="First Name" >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-8 col-sm-8">

        <mat-form-field (keydown.enter)="$event.preventDefault()">
            <input matInput placeholder="E-mail"  >
        </mat-form-field>
        <mat-error >Required</mat-error>
    </div>


  </div>

Upvotes: 1

Related Questions