Label isn't on the same line as its .input-group bootstrap 5

March 24, 2022

  <div class="input-group mb-3">
      <label class="input-group-text form-floating ">Tell us Your Name *</label>
      <input type="text" class="form-control" placeholder="First Name">
      <input type="text" class="form-control" placeholder="Last Name">
   </div>

My code is like this, but what I want to do is to have the label part above the input part and be responsive. I will be glad if you help me

>Solution :

Try this code. It adds the row and col syntax in your html.

<div class="input-group mb-3 row">
  <label class="input-group-text form-floating col-12">Tell us Your Name *</label>
  <input type="text" class="form-control col-6" placeholder="First Name">
  <input type="text" class="form-control col-6" placeholder="Last Name">

This will put the label at the top and the input fields below the label.