from Bootstrap grid system. It controls how much width the column takes on different screen sizes (mobile / laptop responsive design). ( 🔹 Meaning of each part) Bootstrap divides a row into 12 columns.

1. col-xs-12

• xs = extra small devices (mobile phones)

• 12 means full width (12/12)
  👉 On mobile → this field takes 100% width

2. col-sm-12

• sm = small devices (tablets)

• 12 = full width
  👉 On tablet → still 100% width

3. col-md-3

• md = medium devices (laptops/desktops)

• 3 means 3 out of 12 columns
  👉 On desktop → takes 25% width (3/12)

🔹 Simple Visualization

📱 Mobile (xs, sm)

[ Address Input Field ] (full width)

💻 Desktop (md)

[ Address ] [ Name ] [ Phone ] [ Email ]
(25%) (25%) (25%) (25%)

🔹 Example with 4 fields

<div class="row">
<div class="col-md-3">Address</div>
<div class="col-md-3">Name</div>
<div class="col-md-3">Phone</div>
<div class="col-md-3">Email</div>
</div>

👉 On desktop → 4 columns in one row
👉 On mobile → each will go one below another