Form layout, input field issues when using class="row" (Bootstrap form)

Hello fellow coders,

I am making a form with multiple input fields. I am having trouble with the layout of the inputs. I would like multiple input fields on the same row and then have that row duplicated.

The way I have coded it works for the first row.

  <div class="row">  
    <form class="form-inline">
      <div class="form-group">
        <label for="text">First</label>
        <input type="text" class="form-control" id="First">
      </div>
      <div class="form-group">
        <label for="text">Last</label>
        <input type="text" class="form-control" id="Last">
      </div>
      <div class="form-group">
        <label for="number">Badge Number</label>
        <input type="number" class="form-control" id="Badge">
      </div>
      <div class="form-group">
        <label for="text">Section</label>
        <input type="text" class="form-control" id="Sec">
      </div>
   </div>

I copied the same code and pasted it below to have a duplicate of the inputs. It isn’t doing what I expected. The additional rows have each input extend the entire width of the page (regardless of the page size).

Here is my pen

Thanks all, for your time

I have found two issues in your html

  1. You haven’t closed one form (</form>)
  2. Your </form> is after </div> but it should be before
    <div class="row">
      <form class="form-inline">
        <div class="form-group">
          <label for="text">First</label>
          <input type="text" class="form-control" id="First">
        </div>
        <div class="form-group">
          <label for="text">Last</label>
          <input type="text" class="form-control" id="Last">
        </div>
        <div class="form-group">
          <label for="number">Badge Number</label>
          <input type="number" class="form-control" id="Badge">
        </div>
        <div class="form-group">
          <label for="text">Section</label>
          <input type="text" class="form-control" id="Sec">
        </div>
      </form>
    </div>
    <div class="row">
      <form class="form-inline">
        <div class="form-group">
          <label for="text">First</label>
          <input type="text" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="text">Last</label>
          <input type="text" class="form-control" id="pwd">
        </div>
        <div class="form-group">
          <label for="number">Badge Number</label>
          <input type="number" class="form-control" id="Badge">
        </div>
        <div class="form-group">
          <label for="text">Section</label>
          <input type="text" class="form-control" id="Sec">
        </div>
      </form>
    </div>
1 Like

Awesome! Thank you!

How did you find that so fast? was it by eye or did you paste it into an editor? Which editor do you use?

Sorry for the noob questions, still learning.

Heh, I found those issues by eye. I knew there was some sort of silly mistake since the other form was working fine.

I haven’t used a code editor for this, although when I work on my projects I work with Visual Studio Code, it has integrated terminal and is visually appealing. I would strongly recommend it when you are working towards back-end certification (or event front-end).

1 Like

I just finished listening to a podcast about VS Code. Seems to be great. I think I will give it a go.

Still impressed that you found it by eye. How to you keep track of all the

's? Drives me nuts!

I guess it just comes with time :stuck_out_tongue: HTML indentation also helps.

Practice, seems to be the REAL secret for life in general.

Thanks again for your help today.