Two fields on the same line in a vertical form with bootstrap

debugcn Published at Dev

Leandro Faria

I would like the fields "Name" and "Last Name" to be on the same row.

I've found some solutions such as this one here in stackoverflow, but the problem is that I want the labels positioned above the fields to be side by side too.

How is that possible?

enter image description here

Here's the form code:

<form>
  <div class="form-group">
    <label for="inputName">Name:</label>
    <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
  </div>
  <div class="form-group">
    <label for="inputLastName">Last Name:</label>
    <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
  </div>
  <div class="form-group">
    <label for="inputTitle">Title:</label>
    <input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
  </div>
  <div class="form-group">
    <label for="inputEmail">Email:</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="[email protected]">
  </div>
  <div class="form-group bottom-buffer">
    <label for="selectEmail">Notifications:</label>
    <select class="form-control" id="selectEmailNotifications">
      <option>None</option>
      <option>Daily</option>
      <option>Weekly</option>
      <option selected>Monthly</option>
    </select>
  </div>
  <div class="form-group bottom-buffer">
    <label for="selectEmail">Status:</label>
    <select class="form-control" id="selectEmailNotifications">
      <option selected>Active</option>
      <option>Inactive</option>
    </select>
  </div>
  <div class="form-group bottom-buffer">
    <label for="selectEmail">Profile:</label>
    <select class="form-control" id="selectEmailNotifications">
      <option selected>Administrator</option>
      <option>User</option>
    </select>
  </div>
</form>

brian

Something like this should get you started.

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label for="inputName">Name:</label>
      <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group">
      <label for="inputLastName">Last Name:</label>
      <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
    </div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.