Create a registration form with two columns

Description: Make a registration form. First name and last name must be in one row, email and city in another row, and the address field must be full width.

Hint:

• Use the grid inside the form: row g-3 and col-md-6.

---

Solution

<form class="row g-3">
  <div class="col-md-6">
    <label for="rfn" class="form-label">First name</label>
    <input type="text" class="form-control" id="rfn">
  </div>
  <div class="col-md-6">
    <label for="rln" class="form-label">Last name</label>
    <input type="text" class="form-control" id="rln">
  </div>
  <div class="col-md-8">
    <label for="rem" class="form-label">Email</label>
    <input type="email" class="form-control" id="rem">
  </div>
  <div class="col-md-4">
    <label for="rcity" class="form-label">City</label>
    <select id="rcity" class="form-select"><option selected>Choose...</option><option>Delhi</option><option>Pune</option></select>
  </div>
  <div class="col-12">
    <label for="radd" class="form-label">Address</label>
    <input type="text" class="form-control" id="radd" placeholder="Street and number">
  </div>
  <div class="col-12"><button type="submit" class="btn btn-primary">Register</button></div>
</form>

How it works

• row g-3 on the form creates the grid with a gutter. Each field is a column.
• col-md-6 puts two fields side by side from 768px, and they are stacked on a phone.

Read Forms.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.